电话号码的html输入模式

时间:2015-10-02 06:02:45

标签: html input

我需要这样的模式[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/

4 个答案:

答案 0 :(得分:9)

您可以通过代码::

中的以下更改来实现结果
<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>

For your reference click here

JSFiddle Demo

答案 1 :(得分:2)

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

这要求用户放置像 012 345 6789 这样的空格,如果你想自动添加空格,你应该在输入的onchange中使用javascript。 将onchange="this.value=addSpaces(this.value);"添加到输入中,看看是否有效:

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

答案 2 :(得分:1)

我们使用电话的尼日利亚人:

new FormControl('', [Validators.required, Validators.pattern('^(080|091|090|070|081)+[0-9]{8}$')])

答案 3 :(得分:0)

不是美国,而是相应地改变:

<div>
  <input type="text">
</div>

<div>
  <select id="example" multiple="multiple" style="width: 300px">
      <option value="JAN">January</option>
      <option value="FEB">February</option>
      <option value="MAR">March</option>
      <option value="APR">April</option>
      <option value="MAY">May</option>
      <option value="JUN">June</option>
      <option value="JUL">July</option>
      <option value="AUG">August</option>
      <option value="SEP">September</option>
      <option value="OCT">October</option>
      <option value="NOV">November</option>
      <option value="DEC">December</option>
  </select>
</div>

<div>
  <input type="text">
</div>

$('#example').select2({
    placeholder: 'Select a month'
});

var tabPressed = false;

$('.select2-search__field').keydown((ev) => {
  if (ev.which == 9 ){
    var e = jQuery.Event("keydown");
    tabPressed = true;
  }
});

$('#example').on("select2:selecting", function(e) { 
   if(tabPressed)
   {
     tabPressed = false;
     if($(this).parent().find('.select2-search__field').val() == '')
     {
         e.preventDefault();
       $("#example").select2("close");
       $(this).parent().next().find('input').focus();
     }
   }
});