Mettre en forme le texte entrant dans une zone de texte pour un numéro de téléphone, etc

Question

Impossible de trouver ceci n'importe où, peut-être que je suis à la recherche des mauvais verbes.

J'essaie d'obtenir une zone de texte pour exiger un certain format que vous tapez dans un nombre. Pour plus de simplicité, utilisons un exemple de numéro de téléphone. Comme je tape dans la boîte que je veux quelques lignes directrices pour aider l'utilisateur d'entrer le format correct du numéro de téléphone:

(4__) ___-____ 

(403) 3__-____ 

(403) 329-98__ 

(403) 329-9824 

Cela empêchera les utilisateurs d'oublier le code régional, etc. Je l'ai vu faire ailleurs, mais Je ne sais pas par où commencer.

Je suis sûr que c'est javascript mais c'est pour une application ruby ​​on rails donc si vous connaissez un plugin ou quelque chose.

Merci!

Josh

Answer 1

Je pense que vous êtes à la recherche pour le masked input jQuery plug-in

Answer 2

Pourquoi ne pas simplement créer trois entrées de texte, et utiliser javascript pour déplacer le focus entre eux comme ils sont remplis?

Pour un exemple, voir this jsfiddle. Il utilise une rapide, la fonction vanille JS pour faire avancer entre les entrées:

function advance_phone(event, next_element) 
{ 
    var evt = event ? event : window.event; // Older versions of IE don't pass along an event object 
    var target = evt.target || evt.srcElement; // Get the target of the event 

    if (target.value.length == target.maxLength) 
    { 
    document.getElementById(next_element).focus(); 
    } 
} 

Vous aller plus loin et à l'améliorer pour permettre le déplacement vers l'arrière entre les boîtes lorsque backspace est pressé et ajouter un gestionnaire de pression de touche pour limiter les touches correspondantes aux numéros . Ou vous pouvez même styler les entrées de sorte qu'il looks like a phone field.

Answer 3

+1 à la suggestion d'Amit. Cependant, puisque vous utilisez Rails, vous pourriez vouloir quelque chose qui dépend de Prototype au lieu de jQuery. Check this out http://www.xaprb.com/blog/2006/11/02/how-to-create-input-masks-in-html/