Chi*_*nke 128 html numbers input validating
我需要确保某个<input>字段仅将数字作为值.输入不是表单的一部分.因此它不会被提交,因此在提交期间进行验证不是一种选择.我希望用户无法输入除数字以外的任何字符.
有没有一种巧妙的方法来实现这一目标？
Vir*_*tel 263
您可以使用HTML5输入类型编号仅限制数字条目:
<input type="number" name="someid" />
这仅适用于HTML5投诉浏览器.确保您的html文档的doctype是:
<!DOCTYPE html>
有关旧版浏览器的透明支持,另请参阅https://github.com/jonstipe/number-polyfill.
更新:有一个新的,非常简单的解决方案:
它允许您对文本使用任何类型的输入过滤器
<input>,包括各种数字过滤器.这将正确处理复制+粘贴,拖放,键盘快捷键,上下文菜单操作,不可键入的键和所有键盘布局.
请参阅此答案或在JSFiddle上自行尝试.
出于一般目的,您可以进行以下JS验证:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
如果要允许小数,请将"if condition"替换为:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
JSFiddle演示:http://jsfiddle.net/viralpatel/nSjy7/
mar*_*n87 29
您还可以在html5中使用pattern属性:
<input type="text" name="name" pattern="[0-9]" title="Title" />
虽然,如果你的doctype不是html那么我认为你需要使用一些javascript/jquery.
w.D*_*aya 19
您可以使用以下一行代码：
<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >
它只接受数字。
sub*_* pm 12
请尝试此代码以及输入字段本身
<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>
它会工作正常.
小智 9
您可以使用<input>带有属性的标签type='number'
例如你可以使用<input type='number' />
该输入字段仅允许数值。您还可以指定该字段应接受的最小值和最大值。
快速简便的代码
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
这将仅允许使用数字和退格键。
如果您也需要小数部分，请使用此代码片段
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
你可以使用<input type="number" />.这只允许将数字输入到输入框中.
请注意,输入type="number"标记仅在较新的浏览器中受支持.
对于firefox,您可以使用javascript验证输入:
更新2018-03-12:浏览器支持更好,现在它受以下支持:
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />
并在js中：
function isNumber(e){
e = e || window.event;
var charCode = e.which ? e.which : e.keyCode;
return /\d/.test(String.fromCharCode(charCode));
}
或者，您也可以用一种非常有用的复杂方式编写它：
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
注意：文字中的跨浏览器和正则表达式。
function AllowOnlyNumbers(e) {
e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);
return (/^\d+$/.test(str));
}<h1>Integer Textbox</h1>
<input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />JSFiddle：https ://jsfiddle.net/ug8pvysc/
小智 5
<input type="phone" onkeyup="value=value.replace(/[^\d]/g,'')" name="personalPhone" lay-verify="personalPhone" autocomplete="off" placeholder="Input Your Telephone Number" class="layui-input">
在您的输入标签内添加：onkeyup="value=value.replace(/[^\d]/g,'')"
小智 5
我使用正则表达式将输入值替换为所需的模式。
var userName = document.querySelector('#numberField');
userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {
var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
this.value = newValue;
}
<input type="text" id="numberField">| 归档时间： |
|
| 查看次数： |
595931 次 |
| 最近记录： |