其他分享
首页 > 其他分享> > input现在只输入数字

input现在只输入数字

作者:互联网

1. HTML5

html5中input设置type=“number”,输入框无法输入英文及中文

<input type="number" min=1 step=1>

number类型中的input框右侧自带上下箭头,通过min和step可以限制最小值及每次的变化量。但是输入-、.、自然对数e等,不能完全做到限制正整数。

2. onkeypress

既然仅仅通过number是无法做到正整数的,那我们是否可以通过监控键盘按下事件来做限制呢?

<input type="text" 
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

看起来没有什么问题 只允许一些功能键以及数字0-9 ,但是…中文输入法下是不会触发onkeypress事件的。
那么keydown呢?很不幸,在中文输入法下返回的keyCode都是229,无法做出区别。
keyup呢?keyup倒是可以拿到正确的keyCode,但是keyup是已经发生在input框修改后的事件了,这时候也无法阻止了。
ps:执行顺序keydown - > keypress - > keyup

3. oninput

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');">

$("body").on("input","input",function(){
    $(this).val($(this).val().trim().replace(/\D/g),'');
})

补充:限制两位小数

给class为two-decimal的input框添加限制事件。

  $(".two-decimal").on("input", function (e) {
    e.target.value = e.target.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符

    e.target.value = e.target.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.

    e.target.value = e.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.

    e.target.value = e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");//只允许输入一个小数点

    e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  });


原文链接:https://blog.csdn.net/tonywu1992/article/details/83443431

标签:数字,keyup,number,value,replace,input,输入,target
来源: https://blog.csdn.net/qq_43654065/article/details/120221758