將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輸入限制爲固定長度數字

回答

相關問題