html modèle d'entrée de numéro de téléphone

J'ai besoin d'une formulation comme celle-ci [ 081 222 2224 ] avec des chiffres limite de 10 ..
C'est ma essayer

    <form action="" method="post" id="cusCreate" autocomplete="off">
      <input type="tel" name="telphone"  pattern="[0-9]{10}"  title="Ten digits code" required/>    
      <label style="font-size:9px;padding-left:20px"> Eg : 081 222 2224  </label> 
      <input type="submit" value="Submit"/>
   </form>

http://jsfiddle.net/hbmhjt0r/

  • quel est le problème, vous voulez une meilleure regex, vous avez plus de contraintes?
  • Vous pouvez insérer maxlength="10" pour les chiffres de la limite
  • j'ai besoin d'espace entre les chiffres comme je l'ai indiqué ci-dessus [081 222 2224]
  • pattern="^\d{3}-\d{3}-\d{4}$"
  • maxlenght n'est pas le problème de son travail très bien avec le modèle {10} j'ai besoin d'espace entre les chiffres comme je l'ai montré
  • Jetez un oeil à ce lien espère ull ur obtenir la réponse digitalbush.com/projects/masked-input-plugin
  • Vérifier mon plunker pour vous répondre espère que cela va fonctionner pour vous plnkr.co/modifier/VSxjB0WROhWg0jHXEXQg?p=preview
  • sa fonctionne bien merci
  • n'utilisez pas de type "tel". Seul safari prend en charge. Personne ne l'utilise Safari...
  • si l'une quelconque parcourir via mobile tel type par défaut charger le numéro de pad
  • Si quelqu'un à naviguer sur le site sur un IPHONE, à l'aide de SAFARI. Quelqu'un qui n'est pas sur un iphone, et même les utilisateurs de l'iphone à l'aide de Chrome, ne fonctionne pas. C'est vos oreilles homme, vous faites ce que! Mais en utilisant quelque chose qui est uniquement pris en charge sur l'un des moins populaires navigateurs n'est pas une bonne pratique à tous... Même si Chrome est le seul navigateur supportant, je ne le recommande pas... Alors, quand il est seul safari... certainement pas! Mais vous ne vous en l'homme! C'est votre code!
  • le point est que ça ne marchera que sur les mobiles. De toute façon, il semble que vous avez fait de votre esprit déjà. Je sais que je ne pourrai JAMAIS faire un site qui ne fonctionne que dans Safari. Ou même un site qui fonctionne sur tous les mobiles, mais pas les Pc. Si vous voulez quelque chose qui ne fonctionne que pour les mobiles, vous faites une application mobile. Pas un site web. Mais encore une fois, c'est votre propre projet, et vous ne vous en!
  • Spec: HTML 5.2 spec section 4.10.5.3.6. Le modèle de l'attribut

InformationsquelleAutor Nasik Ahd | 2015-10-02
  1. 9

    vous pouvez atteindre votre résultat avec ci-dessous les changements dans votre code::

    <form action="" method="post" id="cusCreate" autocomplete="off">
      <input type="tel" name="telphone" placeholder="888 888 8888" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" maxlength="12"  title="Ten digits code" required/>    
      <label style="font-size:9px;padding-left:20px"> Eg : 081 222 2224  </label> 
      <input type="submit" value="Submit"/>    </form>

    Pour votre référence, cliquez ici

    JSFiddle Démo

    • Je pense que vous n'avez pas enregistré dans le navigateur chrome, il fonctionne dans firefox. bon travail
    • merci pour cette solution, mais l'utilisateur peut saisir des caractères comme "quelque chose" à l'intérieur de l'entrée
    • Merci, même si "tel" n'est pas une norme au revoir lui-même, le modèle fonctionne parfaitement
    • href="https://www.w3.org/TR/html51/sec-forms.html#telephone-state-typetel" >c'est
    InformationsquelleAutor
  2. 3

    patern="[0-9]{3} [0-9]{3} [0-9]{4}"

    Cela oblige l'utilisateur à mettre dans des espaces comme ça 012 345 6789, si vous voulez les espaces pour être ajouté automatiquement, vous devriez javascript dans le onchange de l'entrée.
    Ajouter onchange="this.value=addSpaces(this.value);" à l'entrée et voir si cela fonctionne:

    function addSpaces(initial){
        initial.replace("/([0-9]{3})/"," ");
        initial.replace("/[0-9]{3} ([0-9]{3})/"," ");
        return initial;
    }
    InformationsquelleAutor x13