Comment ajouter un préfixe inamovible à un champ de saisie HTML ?

Question

En utilisant jQuery, comment puis-je ajouter une valeur par défaut de http:// dans un champ de saisie qui ne peut pas être supprimé, mais qui vous permet toujours de taper une URL après ?

Par défaut : http:// URL : http://www.domaine.nom

Answer 1

ça marche bien pour moi :

 $("input").keydown(function(e) {
var oldvalue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value.indexOf('http://') !== 0) {
        $(field).val(oldvalue);
    } 
}, 1);
});

http://jsfiddle.net/J2BKU/

Answer 2

Ce n'est pas possible. Vous pouvez mettre une valeur dans le champ de saisie, mais elle peut être supprimée.

Vous pouvez mettre le texte en dehors du champ de saisie, cela le protégera contre la suppression, mais il ne sera pas inclus dans la valeur lors de la publication du formulaire.

Vous pouvez utiliser le positionnement absolu pour placer le champ de saisie au-dessus du texte et utiliser le remplissage dans le champ pour commencer à taper après le texte. Exemple:

CSS :

 .UrlInput { position: relative; }
.UrlInput label { position: absolute; left: 3px; top: 3px; color: #999; }
.UrlInput input { position: absolute; left: 0; top: 0; padding-left:40px; }

HTML :

 <div class="UrlInput">
  <label>http://</label>
  <input name="Url" type="text" />
</div>

Answer 3

J'ai vu certains formulaires Web inclure cette valeur en dehors du champ, par exemple

 <label for="url">URL:</label> http:// <input id="url" type="text">

Mais si vous êtes déterminé à appliquer la valeur via JavaScript (et gardez à l'esprit que les utilisateurs peuvent désactiver JavaScript), vous pouvez écrire une fonction qui se déclenche à chaque fois que l'utilisateur tape dans le champ et ajoute http:// au début du champ s'il n'y est pas. Par exemple

HTML :

 <label for="url">URL:</label> <input id="url" type="text" value="http://">

JavaScript :

 $('#url').keyup(function(){

    if( this.value.indexOf('http://') !== 0 ){ 
        // Add lots more code here so that this actually works in practice.    
        // E.g. if the user deletes only some of the "http://", if the 
        // user types something before the "http://", etc...
        this.value = 'http://' + this.value;
    }
});