是否有一种方法可以使用这些解决方案之一,并且还说,只支持文本框输入的最小值为0,最大值为100?
我是 jStepper 的作者,刚刚更新了这个插件,现在可以实现您想要的功能。
因此,请再试一次并查看它是否现在可用 :)
HTML5的方式是添加这些字段。在Chrome和Safari中有效:
<input type="range" min="0" max="100" step="1" />
<input id="picker" type="range" min="0" max="100" step="1" onchange="$('#pickerValue').text(this.value)" />
<div id="pickerValue"></div>
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Disallow non-numbers from being typed in box
this.textBox.keydown(function(event) {
var isNotBackspaceOrDelete = event.keyCode != 46 && event.keyCode != 8;
var isNotInteger = event.keyCode < 48 || event.keyCode > 57;
if(isNotBackspaceOrDelete && isNotInteger) {
event.preventDefault();
}
});
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var isNotInRange = (textBox.value < min) || (textBox.value > max);
if (isNotInRange) {
textBox.value = textBox.value.slice(0, -1);
}
});
return this.textBox;
}
要在中文中使用它,只需调用 new RangeTextBox(min, max)
创建一个新的文本框即可。例如:
$(document).ready(function() {
$("body").append(new RangeTextBox(1, 18));
});
免责声明:此解决方案与Harmen在其他答案中列出的问题相同,即如果最小值为6,则字段不接受像2这样的数字“26”的值,因为2 < 6。您可以使用计时器,或者实际上将此检查移动到onblur
或onchange
之外,并进行检查。那样会允许无效数据输入该字段,但它要少得多令人烦恼。
编辑:此解决方案允许您输入任何内容,但标记所有无效输入,包括超出范围的输入。
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var value = parseInt(textBox.value);
var isNotNumeric = !/^[0-9]+$/.test(textBox.value);
var isOutsideRange = (value < min) || (value > max);
if (isNotNumeric || isOutsideRange) {
$(textBox).addClass('error');
}
else {
$(textBox).removeClass('error');
}
});
return this.textBox;
}
并且样式表:
<style type="text/css">
.error {
color: red;
}
以下是使用jQuery的一种方法,例如,“仅在文本框条目中支持最小值为0和最大值为100”。 如果您输入一个导致该值小于MIN或大于MAX的键,则它将返回到之前的值。 您可以设置标志以仅接受整数。
HTML标记如下:(JSFIDDLE)
<input type="text" class="maxmin" min="0" max="100" intOnly="true" />
然后您可以在文档准备就绪的代码中运行此JavaScript:
// Run this on document ready to allow only numbers between
// max and min to be entered into textboxes with class="maxmin".
// Attributes max, min, and intOnly="true/false" are set in the tag.
// Min should probably be "0" or "1", or max and min could be single digits.
// Otherwise for example, if min=5, you couldn't enter 23 because 2 < 5.
$(".maxmin").each(function () {
var thisJ = $(this);
var max = thisJ.attr("max") * 1;
var min = thisJ.attr("min") * 1;
var intOnly = String(thisJ.attr("intOnly")).toLowerCase() == "true";
var test = function (str) {
return str == "" || /* (!intOnly && str == ".") || */
($.isNumeric(str) && str * 1 <= max && str * 1 >= min &&
(!intOnly || str.indexOf(".") == -1) && str.match(/^0\d/) == null);
// commented out code would allow entries like ".7"
};
thisJ.keydown(function () {
var str = thisJ.val();
if (test(str)) thisJ.data("dwnval", str);
});
thisJ.keyup(function () {
var str = thisJ.val();
if (!test(str)) thisJ.val(thisJ.data("dwnval"));
})
});
我是新手,因此欢迎任何有建设性的评论。
以下是一个示例,展示了您的脚本可能的外观:
var value, min=6, max=100;
function isNumberPressed(k) {
// 48-57 are number 0-9 on a normal keyboard, 96-105 are keypad numbers
return (k > 47 && k < 58) || (k > 95 && k < 106) ? true : false;
}
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
// See if a valid key is pressed
if(isNumberPressed(e.keyCode)){
if(isValidNumber($(this).val())) value = $(this).val();
}
// Do nothing if unallowed keys are pressed
else if(e.keyCode != 46 && e.keyCode != 8) return false;
}).keyup(function(){
// If the value, including the latest number that's added, is not valid (to high or to low), show the old value again
if(isValidNumber($(this).val()) == false){
$(this).val(value);
}
});
});
但它有一个很大的缺点,如果最小值是6,你就不能输入26,因为2 < 6。如果你的最小值小于或等于10,这不是问题。
然而,如果你的最小值超过了10,你可以考虑使用以下代码:
var timer, min=36, max=100;
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
that = this;
// Clear the timer
if(timer)
clearTimeout(timer);
// Set a new timer with a delay of one second
timer = setTimeout(function(){
if(isValidNumber($(that).val()) == false) $(that).addClass('error');
else $(that).removeClass('error');
}, 1000);
});
});
它会延迟一秒钟来检查输入。你需要一些 CSS 代码来实现,例如:
input.error {
border: 2px solid red;
}
这两个脚本都可以实时检查值,这是一个很好的方法。
JStepper有一个错误, 我在他们的网站上尝试了测试器。 http://jstepper.emkay.dk/Default.aspx
遵守规则, 但我可以输入文本:8778.09999
我进行了搜索,最终明白输入的值必须在三个事件中进行检查:keydown、keypress和keyup,它们各自有自己的职责。 keypress: 检查按下的键并决定输入的字符。如果是数字,则允许输入,否则阻止该操作。正如您所看到的,我在这里尝试检查范围。
//var final = val + String.fromCharCode(charCode);
//alert(final);
//if (final < min || final > max)
// return false;
但我们只有新的字符和值。如果我们尝试检查它们的总和,那么这是错误的方式,因为用户可能选择了值的一部分并且新字符站在那里。假设最大范围是100,我们在输入中有“345”,用户选择了“34”,现在用户按下“2”,结果必须是“25”,但“345”+“2”的总和是347,函数会阻止这种情况。所以我决定使用keyup事件来检查范围和正确的值。最后,keydown用于检查上下箭头和控制值,当浏览器支持HTML5数字类型的输入而不像keypress那样更改时,您可以不使用它。
我编写了一个简单的脚本,希望能够帮助。您可以在http://jsfiddle.net/QMaster/r4hwr3a6/中查看它。