入力フィールドのテキストを削除しない

Question

入力フィールドに数値のみを入力するか、プラス/マイナスボタンをクリックして値を選択するプラス/マイナスボタンがあります。テキストフィールドの内側をクリックして、削除したり、番号をバックスペースしたりしてみましょう。ここにhtmlと私のフィドルへのリンクがあります。更新：削除キーはChromeでは動作しますが、Firefoxでは動作しません。 https://jsfiddle.net/714dxayk/5/

<span class="form-title">Quantity</span> 
<form id='myform' method='POST' action='#' class="numbo"> 
<input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold; font-size:18px;" /> 
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> 
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold; font-size:18px;" /> 
</form> 

Answer 1

入力フィールドにキー押しハンドラーを割り当ててみます。ハンドラでは、ブラウザで特定のキーが押され、他のキーの押下は無視されます。

$('.qty').keypress(function(ev){ 
    // Don't ignore numbers. 
    if (ev.charCode >= 48 && ev.charCode <= 57) { 
     return; 
    } 

    // Don't ignore BS, DEL, and arrow keys. 
    switch (ev.keyCode) { 
     case 8: // backspace 
     case 46: // delete key 
     case 37: // arrows 
     case 38: 
     case 39: 
     case 40: 
      return; 
    } 

    // Ignore the rest of the keys. 
    ev.preventDefault(); 
});