3

我正在使用 jQuery Spinner，设置了 min (0) 和 max (500) 值。如何防止用户在输入框中直接输入非数值（或 0-500 范围之外的值）？当用户使用微调器按钮时，最小值和最大值起作用，但在输入表单中输入内容时不起作用。

4

4 回答 4

8

您可以使用以下技术强制输入数字：

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/）

但我不推荐它。这不是预期的文本框行为，它往往会使至少一些用户感到困惑。因此，如果值不在预期范围内，最好只显示警告。

于 2013-01-08T00:31:23.297 回答
0

您可以将其设置为readOnly：

document.getElementById('mySpinner').readOnly = true;
于 2013-01-08T00:35:24.020 回答
0

我认为这是执行此操作的正确方法，而不是公认的方法，因为这要简单得多。

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

任何不是数字的输入都将被数字 1 替换。您也可以替换 || 1 带有一个警告框，用于提醒用户他们在框中输入的数字无效。

您还应该使用 javascript 验证器在表单提交时检查数字，并在读取输入时使用另一个服务器端。

于 2014-09-02T04:11:51.747 回答
0

我是这样做的：

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

完毕。

于 2014-09-08T17:13:19.967 回答