padrão de entrada em html para o número de telefone

Preciso de uma palmadinha como esta [ 081 222 2224 ] com um limite de 10 dígitos .. Esta é a minha tentativa. 

    <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/

 0
htmlinput
Author: Nasik Ahd, 2015-10-02
Source

2 answers

Pode alcançar o seu resultado com as seguintes alterações no seu código:: 

<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>

Para a sua referência Clique aqui

Demonstração Do JSFiddle

 7
Author: , 2015-10-02 06:55:51

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

Isto requer que o utilizador coloque espaços como este 012 345 6789, Se você quiser que os espaços sejam adicionados automaticamente você deve javascript na onchange da entrada. Adicionar onchange="this.value=addSpaces(this.value);" à entrada e ver se isto funciona: 

function addSpaces(initail){
        initial.replace("/([0-9]{3})/","\1 ");
        initial.replace("/[0-9]{3} ([0-9]{3})/","\1 ");
        return initial;
    }
 1
Author: x13, 2015-10-02 06:31:33