javascript - jQuery Spinner：数値以外の値

Question

最小（0）と最大（500）の値が設定されたjQueryスピナーを使用しています。ユーザーが入力ボックスに数値以外の値（または0〜500の範囲外の値）を直接入力しないようにするにはどうすればよいですか？最小値と最大値は、ユーザーがスピナーボタンを使用する場合は機能しますが、入力フォームに何かを入力する場合は機能しません。

Answer 1

次のような手法を使用して、数値入力を強制できます。

var MIN = 0;
var MAX = 500;

$('#foo').on('keyup', function(e) {
  var v = parseInt($(this).val());
  if (isNaN(v)) {
     return $(this).val(MIN);
  }
  if ($(this).val() < MIN) {
     $(this).val(MIN);
  } else if ($(this).val() > MAX) {
     $(this).val(MAX); 
  } else {
     $(this).val(v);
  }
});

（例を参照してください：http：//jsfiddle.net/foxbunny/ustFf/）

しかし、私はそれをお勧めしません。これは予想されるテキストボックスの動作ではなく、少なくとも一部のユーザーを混乱させる傾向があります。したがって、値が期待される範囲内にない場合は、警告を表示することをお勧めします。

Answer 2

readOnlyに設定できます：

document.getElementById('mySpinner').readOnly = true;

Answer 3

これははるかに簡単なので、受け入れられている方法ではなく、これを行うための適切な方法だと思います。

$('YOURID/CLASS').spinner({
    min: 1,
    max: 100,
    change: function (event, ui ) {
        $(this).spinner('value', parseInt($(this).spinner('value'),10) || 1);
    }
});

数字ではない入力はすべて数字1に置き換えられます。||を置き換えることもできます。1は、ユーザーがボックスに入力した番号が無効であることをユーザーに警告するアラートボックスを備えています。

また、JavaScriptバリデーターを使用して、フォーム送信時に番号を確認し、入力を読み取るときにもう1つのサーバー側を使用する必要があります。

Answer 4

これは私がそれをした方法です：

jQuery( "#spinner" ).spinner({ min: 0 });

jQuery( "#spinner").keyup(function() {
            if(  isNaN (jQuery(this).val() )){ //Only numbers !
                jQuery(this).prop("value", "0") ; //Back to 0, as it is the minimum
            }
      });

終わり。