Question

我正在使用jQuery Spinner，设置了min（0）和max（500）值。我该怎么做才能防止用户在输入框中直接输入非数值（或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验证程序检查表单提交时的数字，并在读取输入时检查另一个服务器端。

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
            }
      });

完成。

jQuery Spinner：非数值

4 个答案: