【记录】限定input输入框只能输入/输出数字

限定input输入框只能输入/输出数字

1、input用一个type输入,可以修改为number

<input type="number"/>

2、使用onkeyup事件,有bug,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

<input type="text" onkeyup = "value=value.replace(/[^\d]/g,'')">

3、使用onchange事件,在输入内容后,只有input丧失焦点时才会得到结果,并不能在输入时就做出响应

  • 只允许输入数字
<input type="text" onchange = "value=value.replace(/[^\d]/g,'')">
  • 允许输入两位小数
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
  • 允许输入一位小数
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
  • 开头不能为0,且不能输入小数
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >

4、使用oninput事件,完美的解决以上两种事件的问题,测试暂时还没有出现其他问题

<input type="text" oninput = "value=value.replace(/[^\d]/g,'')">

5、Number()转换成数字,该值不是合法数字,则返回NaN

var test = Number($('.tests').val());
        if(test == '' || test == undefined || test == NaN){
            return false;
  		}

6、使用keyup事件非数字自动删除,maxlength限制输入字符数

<input type="text" name="test" maxlength="6">
$('#test').keyup(function(){
                $(this).val($(this).val().replace( /[^0-9]/g,''));
            }).bind("paste",function(){
                $(this).val($(this).val().replace( /[^0-9]/g,''));
            })

你可能感兴趣的:(记录,html5,javascript,正则表达式,jquery)