我有几个输入字段应该只有数字作为有效输入,所以在搜索 SO 之后,我得到了以下 js 代码,只允许将数字输入到运行良好的文本字段中。
function onlyNumbers(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
// the corresponding span to make it visible here
// What code to put here ?
}
}
对应的html是
<input type="text" id="age1" onkeypress="onlyNumbers(event)" />
<input type="text" id="mobileNo" onkeypress="onlyNumbers(event)" />
现在,我在每个这样的输入文本之后都有一个隐藏的span
,我想在输入无效字符后立即显示?因为这样的领域很多
例如age1、age2、mobileNo,每个人都有自己的兄弟跨度。因此,当 age1 输入错误时,应显示相应的错误消息范围。
这是供参考的最小完整html代码
<form method="POST" action="action.php">
...
<li>Age of person 1 :
<input type="text" id="age1" onkeypress="onlyNumbers(event)" />
<span class="error_msg age1"> Only numbers please </span>
</li>
<li>Age of person 2 :
<input type="text" id="age2" onkeypress="onlyNumbers(event)" />
<span class="error_msg age2"> Only numbers please </span>
</li>
<li>
<input type="text" id="mobileNo" onkeypress="onlyNumbers(event)" />
<span class="error_msg mobileNo"> Only numbers please </span>
</li>
...
</form>
如何获取onlyNumbers()
调用函数的元素的引用?以及如何使相应的跨度可见?有任何想法吗 ?