我需要允许用户一次只在一个框中输入值。 例如:如果用户输入月份,则字段不应允许他输入值。 如果用户在其中任何一个中输入值,我可以禁用其他字段吗? 它也只需要数字。
这是我的HTML
<td class="ctext" width="13%"> Reset Frequency in Months/Days
</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" onkeypress="return isNumber(event)" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" onkeypress="return isNumber(event)" />
</td>
这是仅使用Onkeypress键入数字的脚本。
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;}
我可以使用Onkeypress禁用该字段吗?
答案 0 :(得分:2)
试试这个: http://jsfiddle.net/lotusgodkk/GCu2D/1011/
<强> HTML:强>
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" />
</td>
<强> JS:强>
$(document).ready(function() {
$(document).on("blur", ".textfield", function() {
var ele = $(this);
if (ele.val()) {
if (isNaN(ele.val())) {
alert("Only numbers please");
return false;
}
$(".textfield").not(this).attr("disabled", "disabled");
} else {
$(".textfield").removeAttr("disabled");
}
});
});
没有JS的替代解决方案
演示: http://jsfiddle.net/lotusgodkk/GCu2D/1012/
<强> HTML:强>
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month/Days</label>
<input type="number" class="textfield" value="" id="frMnth" name="frMnth" />
<select>
<option value="month">Month</option>
<option value="days">Days</option>
</select>
</td>
将输入类型更改为number
。让浏览器处理number only
要求。当然,您可以添加JS以进行进一步的验证。
答案 1 :(得分:0)
编写JQuery
$(".textfield").keypress( function() {
if($("#frMnth").val().length > 0) {
$("#frDays").attr("disabled", "disabled");
}
else if($("#frDays").val().length > 0) {
$("#frMnth").attr("disabled", "disabled");
}
else {
$("#frMnth").removeAttr("disabled");
$("#frDays").removeAttr("disabled");
}
});