如何僅使用jQuery在輸入文本字段中允許數字（即使在複製粘貼時）？

我使用這個jQuery代碼，只允許在輸入文本字段中輸入數字。如何僅使用jQuery在輸入文本字段中允許數字（即使在複製粘貼時）？

jQuery(document).ready(function() {  
    jQuery('.only_numbers').keydown(function (e) { 
     // Allow: backspace, delete, tab, escape, enter and . 
     if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || 
      // Allow: Ctrl+A, Command+A 
      ((e.keyCode === 65) && (e.ctrlKey === true || e.metaKey === true)) || 
      // Allow: home, end, left, right, down, up 
      (e.keyCode >= 35 && e.keyCode <= 40)) { 
       // let it happen, don't do anything 
       return; 
     } 
     // Ensure that it is a number and stop the keypress 
     if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
      e.preventDefault(); 
     } 
    }); 
});

這工作正常，除了一個小問題。它不允許在該領域粘貼任何東西。我如何允許用戶在字段中粘貼字符串，只要字符串包含所有數字字符？

此外，如果我可以對輸入文本字段只允許使用字母表做同樣的操作，那將會很棒。

來源

2017-06-15 user1543784

我不想使用，因爲在瀏覽器的兼容性，造型和製作表單字段粘性問題'類型=「數字」'限制其他鍵。 – user1543784

但它在所有現代瀏覽器中得到廣泛支持。 http://caniuse.com/#feat=input-number – Manish

檢查我更新的答案它使用'type = text'驗證這兩種類型，並且支持IE和Firefox以及其他瀏覽器。 – Manish

你的HTML

<input type='text' />

你的Jquery

$('input').on('paste', function (event) { 
    if (event.originalEvent.clipboardData.getData('Text').match(/[^\d]/)) { 
    event.preventDefault(); 
    } 
}); 

$("input").on("keypress",function(event){ 
       if(event.which <= 48 || event.which >=57){ 
        return false; 
       } 
      });

工作codepen https://codepen.io/anon/pen/pwEXyg

來源

2017-06-15 04:38:32

這不起作用。這裏是[JSFiddle]（https://jsfiddle.net/o465x64d/） – user1543784

user1543784檢查這codepen這是興奮地做你所需要的 https://codepen.io/anon/pen/pwEXyg –

這太棒了！現在試圖弄清楚如何改變這個代碼以使它適用於字母表。謝謝！ – user1543784

你爲什麼讓事情這麼複雜。您只需輸入type='number'即可達到您的目的，您不需要使用jQuery。它不會允許指數字除e之外的字母，並且當您將粘貼複製到此時，它只會將複製字符串中的數字粘貼到文本框中，並且也會將其粘貼到e。

下面的代碼將只允許在文本框中使用字母。還有隻允許type=text的文本框中的數字的代碼。

function onlyAlphabets(event) { 
 
    //allows only alphabets in a textbox 
 
    if (event.type == "paste") { 
 
    var clipboardData = event.clipboardData || window.clipboardData; 
 
    var pastedData = clipboardData.getData('Text'); 
 
    if (isNaN(pastedData)) { 
 
     return; 
 

 
    } else { 
 
     event.prevetDefault(); 
 
    } 
 
    } 
 
    var charCode = event.which; 
 
    if (!(charCode >= 65 && charCode <= 120) && (charCode != 32 && charCode != 0) && charCode != 8 && (event.keyCode >= 96 && event.keyCode <= 105)) { 
 
    event.preventDefault(); 
 
    } 
 
} 
 

 
function onlyNumbers(event) { 
 
    if (event.type == "paste") { 
 
    var clipboardData = event.clipboardData || window.clipboardData; 
 
    var pastedData = clipboardData.getData('Text'); 
 
    if (isNaN(pastedData)) { 
 
     event.preventDefault(); 
 

 
    } else { 
 
     return; 
 
    } 
 
    } 
 
    var keyCode = event.keyCode || event.which; 
 
    if (keyCode >= 96 && keyCode <= 105) { 
 
    // Numpad keys 
 
    keyCode -= 48; 
 
    } 
 
    var charValue = String.fromCharCode(keyCode); 
 
    if (isNaN(parseInt(charValue)) && event.keyCode != 8) { 
 
    event.preventDefault(); 
 
    } 
 
}

Number Only With Type=Number: 
 
<input type="number" name="quantity" min="1" max="5"> 
 
<br> Number Only With Type=Text: 
 
<input type="text" name="quantity" min="1" max="5" onkeydown="onlyNumbers(event)" onpaste="onlyNumbers(event)"> 
 
<br>Aplhabets Only: 
 
<input type="text" onkeydown="onlyAlphabets(event)" onpaste="onlyAlphabets(event)"/>

更新

添加代碼，允許在type=text只能輸入數字。同時還將在Firefox和IE瀏覽器以及

希望它能幫助:)

來源

2017-06-15 04:41:29 Manish

這些都不能在Firefox中使用。 – Zze

現在起作用，除非您將不得不再次編輯這個以反映更改，因爲現在您不再使用'type =''number''。 – Zze

雅謝謝指出我的壞..：P。 – Manish

如果你想跳過的JS，你可以只設置你的輸入類型=「數字」來做到這一點。雖然它不適用於字母表...

來源

2017-06-15 04:41:38 Icewine

試試這個，它會限制打字的字母，並且不會讓你粘貼它。

$(document).ready(function(){ 
 
    $("#test").on("keypress",function(event){ 
 
     if(event.which <= 48 || event.which >=57){ 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 
    
 
    $("#test").on("change",function(event){ 
 
     $value = $("#test").val(); 
 
     if(isNaN($value)){ 
 
      $("#test").val(''); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="test">

來源

2017-06-15 05:19:52

哦，是的！現在，只有當我能夠得到與字母完全相同的功能時 - 應該能夠輸入（包括小寫和大寫）並粘貼，但是可以防止其他任何內容。 – user1543784

'if（event.which <= 65 || event.which> = 90）'會起作用嗎？ – user1543784

是的，它會工作 –

您可以使用正則表達式來實現這一目標。

僅限數字。

只有

function process(input){ 
 
    let value = input.value; 
 
    let numbers = value.replace(/[^0-9]/g, ""); 
 
    input.value = numbers; 
 
}

<input type="text" oninput="process(this)">

快報。

function process(input){ 
 
    let value = input.value; 
 
    let numbers = value.replace(/[0-9]/g, ""); 
 
    input.value = numbers; 
 
}

<input type="text" oninput="process(this)">

來源

2017-06-15 05:43:31 Zze

這裏是我的解決方案，它比JS更快。

<input type="text" pattern="[\d+\t.]+" formnovalidate="false"/>

來源

2017-06-15 11:09:34

其實，你只需要一個「模式」屬性。

<input type="text" pattern="[\d\t.]+" formnovalidate="false "/>

來源

2017-06-15 11:10:43

如何刪除這個多餘的答案？ –

點擊「刪除」下的灰色字母在答案下登錄。 – Icewine

@Icewine在哪裏？我在android上 –

使用鍵盤事件

//numbers, delete, backspace, arrows   
var validKeyCodes = [8, 9, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]; 
     $("Selectors").on("keydown", function (e) { 
      if (!($.inarray(e.keycode, validkeycodes) >= 0)) 
       e.preventDefault(); 
     });

來源

2017-07-06 05:55:01

如何僅使用jQuery在輸入文本字段中允許數字（即使在複製粘貼時）？

回答

相關問題