Je suis confronté à un problème de création d'une zone de texte pour l'adresse e-mail que je souhaite déjà remplir par exemple: @ hotmail.com afin que seul l'identifiant réel soit entré par l'utilisateur, je souhaite le faire dans une seule zone de texte. C'est possible? si je me souviens, je l'ai vu quelque part sur des sites Web.

2
Atif 14 juil. 2015 à 16:37

3 réponses

Meilleure réponse

Ce type d'approche peut répondre à votre besoin

$('button').on('click',function(){
    var name = $('#in').val();
    var domain = $('#dom').val();
    alert(name + domain);
});
#in{
  border-right:0px;
  margin-right:0px;
  padding-right:0px;
 }
#dom{
  border-left:0px;
  margin-left:-5px;
  padding-left:0px;
  text-align:right;
  width:108px
 }
input{
  border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in"/>
<input id="dom" readonly value="@example.com"/>
<button>Subscribe</button>
<p></p>
4
RevanthKrishnaKumar V. 22 mars 2016 à 09:52

Cet effet est facilement simulé en utilisant un input caché qui ne sera visible que par le serveur.

Dans votre page, ajoutez le code HTML suivant:

<input type='text' id='username'> @hotmail.com
<input name='email' type='hidden' />

Et, dans votre procédure d'initialisation, ajoutez ce qui suit:

$("#username").bind("blur", function() {
    $("input[name = 'email']").val($(this).val() + "@hotmail.com"); 
});

Cela remplira le input caché lorsque le focus est perdu du visible, le remplissant avec <username>@hotmail.com.

J'en ai créé un violon ici, bien que l'entrée cachée soit remplacée par une entrée de texte normale afin le résultat peut être vu.

0
Adrian Wragg 14 juil. 2015 à 14:49
$(document).ready(function(){
    $('input').blur(function(){
	    var mailname=$(this).val();
	    var mailprovider=$('span').text();
	    alert(mailname+mailprovider);
    });
});
#uname{
    padding:7px;
    width:256px;
    height:20px;
    float:left;
    position: relative;
    border:1px solid #ccc;
    border-right:none;
}
span.hid {
    text-align: center;
    display:inline-block;
    position: relative;
    font-size:15px;
    padding:6px;
    border:1px solid #ccc;
    border-left:none;
    right:15px;
    width:120px;
    height:22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="uname" value=""><span class="hid">@hotmail.com</span>	
1
RevanthKrishnaKumar V. 15 juil. 2015 à 09:59