电话号码的html输入模式

Question

我需要一个这样的模式[081 222 2224],数字限制为10 ..这是我的尝试

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

Answer 1

您可以通过以下代码更改来实现您的结果::

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

供您参考,请点击此处

JSFiddle演示

Answer 2

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

这要求用户输入这样的空格012 345 6789，如果您希望自动添加空格，您应该在输入的更改中使用 javascript。添加onchange="this.value=addSpaces(this.value);"到输入中，看看这是否有效：

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