jQuery微调控件：非数字值

Question

我正在使用jQuery Spinner，设置了最小值(0)和最大值(500)。我该怎么做才能防止用户在输入框中直接输入非数字值（或超出0-500范围的值）？当用户使用微调器按钮时，最小值和最大值是有效的，但当有人在输入框中输入时不起作用。

- AndraD

---

我在Keith Bentrup的一个不错的帖子中学到了如何确保只能向输入框添加数字值。但是，我仍然不确定如何将数字值限制在特定范围内。 - AndraD

看看我的例子。它不是很优雅，但它的目的是证明这一点。一旦你开始以编程方式调整用户输入，它就变得有点奇怪了。最好使用数字插件，并警告用户范围。 - user234932

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

但我不建议这样做。这不是文本框的预期行为，而且往往会让一些用户感到困惑。因此，最好只在值不在预期范围内时显示警告。

- user234932

---

谢谢您的输入！我仍在努力找出如何在我的情况下最好地使用旋转器，但是您的评论帮了很多忙！ - AndraD

可能只是我个人的看法，但我学到的一条关于用户体验的经验教训是，如果你使用最古老的可行技术来完成工作，通常效果最好。因为人们对它已经有了最多的接触和经验。但是，也有一些新颖的、卓越的想法，尽管是新的，但确实有效。（旋转器就不属于这个类别。） :) - user234932

我完全赞同你的建议。 - PhoneixS

Answer 2

你可以将它设置为 readOnly：

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

- Hugo

---

我不确定这是否是一个好主意。如果用户想输入一个较大的值，比如300，会怎么样呢？ - AndraD

@Alexandra：如果你预计用户输入的值范围较小，那么Spinner是很好的选择。否则，它需要手操作鼠标进行一些精细的动作。我无法理解为什么有人会在整数值大于10~20的范围内使用Spinner。 - user234932

然后您可以监听“change”事件，检查输入以确保它只包含数字，如果不是，则清除它或将其设置为其最后一个有效值。 - Hugo

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验证器来检查数字，并在读取输入时使用另一个服务器端验证器。

- AJ Quick

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

完成。

- Francisco Corrales Morales