16

我想为电话号码创建一个输入字段。我正在使用 JavaScript 动态创建输入字段。

<input type="text" id="phone" name="phone">

如何限制用户只能输入 10 位数字才能获取电话号码。

4

19 回答 19

26

试试这个

<input type="text" name="country_code" title="Error Message" pattern="[1-9]{1}[0-9]{9}">

这将确保

  1. 它是数字
  2. 最多为 10 个字符
  3. 第一个数字不为零
于 2013-10-18T09:07:12.887 回答
13

采用maxlength

<input type="text" maxlength="10" />
于 2013-10-18T08:57:29.493 回答
10

您可以使用maxlength来限制长度。通常对于您会使用的数字输入type="number"，但这会添加一个旋转框来滚动数字，这对于电话号码完全没有用。但是，您可以使用该pattern属性将输入限制为数字（如果需要，还需要 10 个数字）：

<input type="text" maxlength="10" pattern="\d{10}" title="Please enter exactly 10 digits" />
于 2013-10-18T09:25:32.033 回答
5

好吧，我已经成功地创建了自己的工作答案。

<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">

也

    <script>        
           function phoneno(){          
            $('#phone').keypress(function(e) {
                var a = [];
                var k = e.which;

                for (i = 48; i < 58; i++)
                    a.push(i);

                if (!(a.indexOf(k)>=0))
                    e.preventDefault();
            });
        }
       </script>
于 2013-10-18T09:23:19.103 回答
2

为您的输入添加一个maxlength属性。

<input type="text" id="phone" name="phone" maxlength="10">

请参阅JSFiddle 上的这个工作示例。

于 2013-10-18T08:53:48.637 回答
2

HTML

<input type="text" name="fieldName" id="fieldSelectorId">

此字段最多只能接受 10 位数字，并且不接受零作为第一位数字。

jQuery

jQuery(document).ready(function () {
      jQuery("#fieldSelectorId").keypress(function (e) {
         var length = jQuery(this).val().length;
       if(length > 9) {
            return false;
       } else if(e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
       } else if((length == 0) && (e.which == 48)) {
            return false;
       }
      });
    });
于 2019-01-16T12:51:35.403 回答
1

对您的输入使用 maxlength 属性。

<input type="text" id="phone" name="phone" maxlength="10">

在此处查看小提琴演示Demo

于 2013-10-18T08:55:18.630 回答
1 
$(document).on('keypress','#typeyourid',function(e){
if($(e.target).prop('value').length>=10){
if(e.keyCode!=32)
{return false} 
}})

优点是这适用于 type="number"

于 2019-11-19T10:03:07.100 回答
1

这就是我使用的：

<input type="tel" name="phoneNumber" id="phoneNumber" title="Please use a 10 digit telephone number with no dashes or dots" pattern="[0-9]{10}" required /> <i>10 digits</i>

它准确地阐明了条目中的预期内容并提供了可用的错误消息。

于 2020-10-02T10:51:30.377 回答
0

虽然您可以在输入上使用maxLength和一些javascript 验证，但仍然需要进行服务器端验证。

于 2013-10-18T08:56:00.660 回答
0

HTML

<input type="text" id="youridher" size="10">

使用jQuery，

SIZE = 10
$(document).ready(function() {
      $("#youridher").bind('keyup', function() { 
            if($("#youridher").val().length <= SIZE && PHONE_REGEX) {
                return true;
            }
            else {
                return false;
            }  
      });
});
于 2013-10-18T09:06:15.480 回答
0

maxlength 限制不能多于所需位数但接受少于所需位数的位数。如果 mobile No maxlength="10" 它不会接受 11 但可以接受任何最多 10

于 2017-06-12T11:43:57.417 回答
0

这里所有上述输出都给出了一个 10 位数字，但同时输入字段也接受字符，这不是完整的解决方案。为了只设置 10 位数字，我们可以使用输入标签以及该类型作为数字，因为我们可以通过在 css 中编写一些小代码来删除上下数组，如下所示以及输入标签.

 <input name="phone" maxlength="10" pattern="[1-9]{1}[0-9]{9}" class="form-control" id="mobile"  placeholder="Enter your phone Number" type="number">


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
于 2017-11-25T20:09:01.567 回答
0

只需在您的文档中包含 parsley.js 文件，然后在手机号码的输入元素中输入这个

data-parsley-type= "number" data-parsley-length="[10,10]" data-parsley-length-message= "Enter a Mobile Number"

您可以根据您的要求更改消息您还需要通过编写初始化文档中的 parsley.js 文件

 <script type="text/javascript">

        $(document).ready(function() {
            $('form').parsley();
        });
    </script>

---您文档中的上述代码。***

于 2018-02-13T08:48:11.903 回答
0

下面的代码片段按预期完成了工作！

<input type="text" name="AUS" pattern="[0-9]{10}" title="You can enter only 10 digits..." />


//type="text" <!-- always -->
//name="AUS" <!-- for Australia -->
//pattern="[0-9]{10}" <!-- 10 digits from 0 to 9 -->
//title="You can enter only 10 digits..." <!-- Pops a warning when input mismatches -->
于 2018-04-25T11:40:54.077 回答
0

如何将文本框格式设置为 8 位数字（00000019）

string i = TextBox1.Text;
string Key = i.ToString().PadLeft(8, '0');
Response.Write(Key);
于 2019-09-11T11:02:26.647 回答
0 
  <input type="text" name='mobile_number' pattern=[0-9]{1}[0-9]{9}>
于 2020-01-01T12:24:11.773 回答
0

如果您希望用户在输入控件中输入 10 位数字进行限制，请查找以下代码

<input class="form-control  input-md text-box single-line" id="ContactNumber" max="9999999999" min="1000000000" name="ContactNumber" required="required" type="number"  value="9876658688">

好处 -

  1. 它不允许在输入框中输入任何字母，因为输入框的类型是“数字”

  2. 它将允许最多 10 位数字，因为 max 属性设置为 10 位数字中的最大可能值

  3. 它不允许用户输入任何少于 10 位数的内容，因为我们希望将用户限制在 10 位数的电话号码中。代码中的 min 属性具有 10 位的最小可能值，因此它会告诉用户输入不小于该值的有效 10 位值。

于 2020-02-17T12:54:38.493 回答
-2

无论谁在 2020 年查看此帖子，他们都可以使用<input inputmode="tel">电话号码（10 位）、<input inputmode="numeric" maxLength={5}>数字类型并限制为仅 5 位。

于 2020-07-03T13:14:52.837 回答