input输入框限制仅能输入数字且规定数字长度(使用与输入手机号)

  现在越来越多的账户名使用手机号来登录,为了减少前后端的交互,需要用户在输入时就要进行格式的判断,

  目前的常规办法是,在输入完成后进行判断。

  下面的方法是在输入时就规定只能输入数字,其他格式的字符是无法输入进去的:

<input onkeydown="onlyNum();" style="ime-mode:Disabled" maxlength="11">
//ime-mode:Disabled:作用是完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME;
//ime-mode的其他属性值及作用如下:
    //auto  : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
    //active  : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
    //inactive  : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME

//maxlength:该属性规定该input框中,输入内容的长度;

<script language=javascript>
function onlyNum(){
    if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
    event.returnValue=false;  //执行至该语句时,阻止输入;可类比阻止冒泡原理或者禁止右键功能;
}
</script>

  该方法还存在一些问题,无法阻止第三方输入的任何字符,如果有其他更加完善的解决办法,请留言,我也学习学习。

时间: 2024-08-05 11:52:05

input输入框限制仅能输入数字且规定数字长度(使用与输入手机号)的相关文章

今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。

最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个maxlength属性,就查了这儿属性. 在W3school里说maxlength属性有两个最大值:85和55,这个属性用于type类型为text和password属性.具体为啥有两个最大值还不清楚,待查. maxlength和size的区别在于,如: maxlength="5",则input输

【JS】input输入框只能输入数字

一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 replace(/[^/d]/g,''):全文匹配非数字,并替换成空. 那我们的实现代码为: var input = document.querySelector("#demo"); input.oninput = function (){ input.value = input.valu

input输入框 只能输入数字 oninput = &quot;value=value.replace(/[^\d]/g,&#39;&#39;)&quot;

项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验  oninput = "value=value.replace(/[^\d]/g,'')"   写在html中Input 标签内可以 ,写在第三方ui框架也可以 如图 这是html中input标签中 input输入框 只能输入数字 oninput = "value=value.re

限制&lt;input&gt;输入内容 只允许数字 或者 字母

只能输入数字: 有回显 <input onkeyup="value=value.replace(/[^\d]/g,'')"> 只能输入数字:无回显 <input id="Text1" type="text" onkeypress="return IsNum(event)" /> <script language="javascript" type="text/java

input输入框限制输入正整数、小数、字母、文字

有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^

input输入框只能输入正整数

input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.le

判断输入框中输入的是否为数字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT

微信小程序组件解读和分析:十、input输入框

input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <view class="content"> type:有效值:text 感觉没什么区别 <input  placeholder="type=text" type=

input输入框限制20个字符,十个汉字

英文和数字为一个字符,汉字为两个字符 在 Web 开发中,经常要对表单元素的输入进行限制,比如说不允许输入特殊字符,标点.通常我们会监听 input 事件: inputElement.addEventListener('input', function(event) { let regex = /[^1-9a-zA-Z]/g; event.target.value = event.target.value.replace(regex, ''); event.returnValue = false