如何防止用户在文本框中插入字符，而不是只有数字可以插入 jQuery Mobile答案

【问题标题】：How can I prevent user from inserting characters in Text Box other than Only numbers can insert jQuery Mobile如何防止用户在文本框中插入字符，而不是只有数字可以插入 jQuery Mobile
【发布时间】：2012-07-12 23:00:57
【问题描述】：

我在 jQuery mobile 中实现了 iphone&android 应用程序。* 我使用了 **pure jQuery mobile

在文本框中输入电话号码。我使用 TYPE="TEL"' 这是数字键盘。

<input type="tel" style=" width:81%;" id="contactNumber" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />

但用户也可以在文本框中输入文本，这是不必要的。

How can I prevent user from inserting characters other than numbers?

对于移动设备用户来说，如果唯一可能的输入是数字会更舒服，因为他们必须按每个按钮才能获得数字而不是字母！

我尝试在输入字段中添加TYPE=”TEL” TYPE=”mumber”，但无法阻止。

【问题讨论】：

How to allow only numeric (0-9) in HTML inputbox using jQuery?的可能重复

标签： jquery html jquery-mobile cordova

【解决方案1】：

$(document).ready(function() {
    $('#contactNumber').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

这应该将任何非数字替换为空字符 *，因为它们被放入，不需要一次搜索多个非数字。

【讨论】：

$(document).ready(function() { $('#contactNumber').keyup(function() { var numbers = $(this).val(); $(this). val(numbers.replace(/\D/, '')); }); });在我写完这篇文章后，我意识到这并没有更新价值。只需在 $(this).val() 中敲击 numbers.replace() 就可以了。
我修改了答案。我意识到最初这并没有更新#contactNumber 的值。现在它是。我之前没有使用过 JQuery mobile，所以我不知道它是否以通常的方式响应 .keyup。你可以把它作为一个快速测试： $('#contactNumber').keyup(function() {alert("works");});
你能在这上面添加一个负整数检查吗？ @戴尔
我只知道 + 做到了。 $(this).val(numbers.replace(/\D+/, ''));工作。

【解决方案2】：

以上所有方法都不适合我，但我找到了一个非常适合我需要的解决方案（禁止输入字段中的特殊字符）。防止和提醒用户。

    <script>
     $("#userlogin").keypress(function(e) {
      if (String.fromCharCode(e.which).match(/[^A-Za-z0-9_ ]/)) {
        e.preventDefault();
        alert("Special characters are not allowed. Use 'A-Z', 'a-z' and '0-9'.");
       }
     });
    </script>

【讨论】：

【解决方案3】：

以前看过这个答案。查看http://www.texotela.co.uk/code/jquery/numeric/

您可以简单地更改您的班级 ID 并将此代码放在您的页面上：

$(document).ready(function(){
    $(".numeric").numeric();
});

如果你不想使用 jQuery，你可以编写自己的函数并调用它 onkeyup 事件

见：http://www.htmlcodetutorial.com/forms/index_famsupp_158.html

另一个选项是使用 step 属性：

http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.step.float

<input type="number" step="0.01" min="0" >

【讨论】：

【解决方案4】：

type="tel" 是 HTML 5，而不是 jqueryMobile。其浏览器支持 HTML 5 输入类型的较晚设备可以很好地呈现这些框。但是对于旧版本，需要有额外的脚本。脚本已经发布在上面的答案中。

【讨论】：

【解决方案5】：

$('#contactNumber').bind('keypress', function (event) {
        event = event || window.event; canAdd = new Boolean(false);
        canAdd = ((event.charCode > 47) && (event.charCode < 58) || (event.charCode == 32) || (event.charCode == 40) || (event.charCode == 41) || (event.charCode == 43) || (event.charCode == 45) || (event.charCode == 124));
        if (!canAdd && event.charCode)
            return false;
    });

但最好使用 HTML5 电话属性

【讨论】：

【解决方案6】：

HTML：

 input type="tel" (keypress)="isNumberKey($event)"

脚本：

isNumberKey(evt: any) { < br >
        // to accept only numbers in contact field<br>
        if ( < br >
            (evt.key >= '0' && evt.key <= '9') || < br >
            evt.key == "Backspace" || < br >
            evt.key == "Delete" || < br >
            evt.key == "ArrowLeft" || < br >
            evt.key == "ArrowRight" < br >
        ) { < br > //"Backspace" etc for 'firefox' browser<br>
                return true; < br >
        } < br >
        return false; < br >
}

【讨论】：