使用 JQuery 控制文本框的范围
Posted
技术标签:
【中文标题】使用 JQuery 控制文本框的范围【英文标题】：Using JQuery to Control the Range of Textboxes 【发布时间】：2013-01-01 19:58:45 【问题描述】：使用 JQuery，我正在尝试创建一些文本框，它们只允许数值，没有重复的数字，没有空格，并且只允许范围内的数字。我使用了从 1 到 999 的范围。到目前为止，这是我的代码。我有数字值和数字部分的重复工作，但我不确定如何防止空文本框或为每个文本框保持 1 到 999 的范围。范围部分似乎不起作用，我还没有弄清楚如何提示用户有关空文本框的信息。我认为有一种方法可以使用 html5 来控制范围，但如果用户不在范围内，该方法不会提示用户。你有什么建议吗？
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<form id="form1">
Enter some text: <input type="text" id="field1" />
<br /><br />
Enter some text: <input type="text" id="field2" />
<br /><br />
Enter some text: <input type="text" id="field3" />
</form>
<script type="text/javascript">
$(document).ready(function()
$('#field1').blur(function()
if ($(this).val() == $('#field2').val() || $(this).val() == $('#field3').val())
$('#field1').stop(false,true).after(' <span style="color:red;" class="error">No duplicate values please!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
);
$('#field2').blur(function()
if ($(this).val() == $('#field1').val() || $(this).val() == $('#field3').val())
$('#field2').stop(false,true).after(' <span style="color:red;" class="error">No duplicate numbers please!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
);
$('#field3').blur(function()
if ($(this).val() == $('#field1').val() || $(this).val() == $('#field2').val())
$('#field3').stop(false,true).after(' <span style="color:red;" class="error">Duplicate values are not allowed!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
);
);
function RangeTextBox(min, max)
this.min = min;
this.max = max;
this.textboxbody = $("<input type='text'>");
// Check for a valid range
this.textboxbody.keyup(function(event)
var textboxbody = event.target;
var value = parseInt(textboxbody.value);
var isNotNumeric = !/^[0-9]+$/.test(textboxbody.value);
var isOutsideRange = (value < min) || (value > max);
if (isNotNumeric || isOutsideRange)
$(textboxbody).addClass('error');
else
$(textboxbody).removeClass('error');
);
return this.textboxbody;
<!-- To use it in, simple create a new TextBox by calling new RangeTextBox(min, max). For example -->
$(document).ready(function()
$("textboxbody").append(new RangeTextBox(1, 999));
);
</script>
</html>
【问题讨论】：
【参考方案1】：$(document).ready(function()
$("textboxbody").append(RangeTextBox(1, 999));
);
我建议你使用 jquery 验证插件：http://docs.jquery.com/Plugins/Validation
【讨论】：
你不能用 $("textboxbody") 选择任何东西。您应该按 id 或 name 或其他方式选择以上是关于使用 JQuery 控制文本框的范围的主要内容，如果未能解决你的问题，请参考以下文章