电话号码的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/

原文由 Nasik Ahd 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 user1527246 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

这需要用户输入这样的空格 012 345 6789 。如果您希望自动添加空格，您应该将 javascript 添加到输入的 onchange 中。将 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;
}

原文由 x13 发布，翻译遵循 CC BY-SA 4.0 许可协议