jQuery Spinner：非數值

我正在使用jQuery Spinner，並設置了min（0）和max（500）值。我能做些什麼來防止用戶在輸入框中直接輸入非數字值（或0-500範圍以外的值）？最小值和最大值在用戶使用微調按鈕時起作用，但在輸入表單中輸入內容時不起作用。jQuery Spinner：非數值

來源

2013-01-08 Alexandra

我發現了一個不錯的[發貼]（http://stackoverflow.com/questions/891696/jquery-what-is-the-best-way-to-restrict-number-only-input-for-textboxes-all ）由Keith Bentrup教我如何確保只有數值可以添加到輸入。不過，我不確定如何將數值限制在特定的範圍內。 – Alexandra

看我的例子。這不是很優雅，但它是爲了證明這一點。一旦你開始用編程方式處理用戶輸入，它會變得有點奇怪。最好使用數字插件，並警告用戶有關範圍。 – hayavuk

您可以使用的技術像這樣的強制數字輸入：

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-08 00:31:23 hayavuk

謝謝您的輸入！我仍然試圖找出如何在我的情況下最好地使用微調，但你的意見幫助了很多！ – Alexandra

它可能就是我，但是我學習UX的一個教訓是，如果使用可能完成工作的最早技術，它通常效果最好。只是因爲人們接觸最多。但是，再一次，儘管是新的，但仍然有很好的想法能夠發揮作用。（Spinners只是不在這一類。:) :) – hayavuk

我完全符合你的建議。 – PhoneixS

你可以將其設置爲readOnly的：

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

來源

2013-01-08 00:35:24 Hugo

我不確定這是個好主意。如果用戶想輸入一個很大的值，比如300，該怎麼辦？ – Alexandra

@Alexandra：如果您希望用戶輸入小範圍的值，微調器纔有用。否則，它需要操作鼠標的手部有一些精細的動作。我看不出爲什麼有人會用大於10〜20整數值的遊俠來使用微調器。 – hayavuk

然後你可以聽'更改'事件，檢查輸入以確保它只有數字，如果沒有，清除它或設置它的最後一個有效值。 – Hugo

我認爲這是要做到這一點，而不是接受的方式，因爲這是更簡單的正確方法。

$('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-02 04:11:51

這是我做的：

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-08 17:13:19

jQuery Spinner：非數值

回答

相關問題