将HTML输入限制为固定长度数字

我正在设计一个HTML输入接受电话号码（10位数字）。我希望输入表格预先填入' - '。当用户输入数字时，' - '应该被实际的数字替换。同样，当用户删除号码时，应该用' - '替换。将HTML输入限制为固定长度数字

以下是我取得的成果：https://jsfiddle.net/f99obu18/2/。

Javascript代码（用jQuery）：

$("form input").val("-".repeat(10)); 
$("form").on('keypress keydown', 'input', function(event) { 
    // Replaces the "-" while user input. 
    var index = this.selectionStart; 
    if (event.keyCode >= 48 && event.keyCode <= 57) { 
     $(this).val($(this).val().substring(0, index) + 
        $(this).val().substring(index + 1, $(this).val().length)); 
     setCaretToPos(this, index); 
    } 
    // Adds "-" at the current position for "Backspace." 
    if (event.keyCode == 8 && index > 0) { 
     $(this).val($(this).val().substring(0, index) + '-' + 
        $(this).val().substring(index, $(this).val().length)); 
     setCaretToPos(this, index); 
    } 
    // Adds "-" at the current position for "Delete." 
    if (event.keyCode == 46) { 
     $(this).val($(this).val().substring(0, index) + '-' + 
        $(this).val().substring(index + 1, $(this).val().length)); 
     setCaretToPos(this, index); 
     return false; 
    } 
});

（该setCaretToPos方法是从jQuery Set Cursor Position in Text Area拍摄。）

问：的解决方案看起来在我的电脑上很好，但不工作的我的手机。这个输入验证是否有标准的可重复使用的代码（例如，jQuery插件）？

来源

2016-12-01 Yang

移动浏览器通常没有登记'keypress'事件。 'keydown'或'keyup'应该可以工作，但是你只需要在'$ .on（）'的第一个参数中用一个空格分隔不同的事件。不需要逗号。 – josephting

你还需要检查这一点，当我走到最后（插入符号末尾）并按下'del'键时，它会一直添加连字符。 –

@josephting谢谢你的回复。它适用于我的手机，但不是打击垫。你知道为什么吗？ – Yang

jQuery插件masked-input-plugin可能会有所帮助。

有了这个插件，你的代码更改为：

$("form input").mask("9999999999",{placeholder:"-"});

来源

2016-12-01 06:29:38 Chiu

谢谢，这正是我要找的。 – Yang

将HTML输入限制为固定长度数字

回答

相关问题