注册登录时输入11位手机号,不能输入字母和特殊字符,input number类型去掉上下加减箭头

13 篇文章 2 订阅
3 篇文章 0 订阅

1、如果使用type=“number”,则为造成能输入“-”、‘+’和“.”,在type为number的时候要可以输入加号、减号和小数点的。


补充:在为number类型时,会产生上下可以加减的箭头,去掉方式为

input[type='number']{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}

效果为


2、限制输入框为只能输入最大为11为数字

<input type="text" placeholder="请输入手机号" autofocus="autofocus" autocomplete="off" οninput="if(value.length>11)value=value.slice(0,11)"  οnkeyup="this.value=this.value.replace(/\D/g,'')"/>

autofocus文本输入字段被设置为当页面加载时获得焦点

autocomplete自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项

注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。

oninput事件在用户输入时触发

onkeyup用户释放键盘按钮时出发

3、密码输入为6-16为数字和字母的组合

<input type="password" placeholder="请输入密码"  autocomplete="off" οninput="if(value.length>16)value=value.slice(0,16)" onKeyUp="value=value.replace(/[\W]/g,'')" />





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值