让input框只输入英文

解决扫码枪在中文输入法时扫码冲突

扫码枪在扫完码时会自动回车，这时如果是中文输入法就会触发输入法联想，再加一个回车，那么input框输入的就成中文了。如果可以控制input框只能输入英文那就好了。css有一个属性（ime-mode）轻松就可以解决，但可惜的是该属性只能在IE浏览器有效，webkit内核浏览器不支持，放弃！

<input type="text" style="ime-mode:disabled"/>

文本框当type=password时，输入法就是英文，但是显示的是一堆点点点。所以要想办法让用户在password框中输入英文，但是看到的确是正常的文本框。

思路：

1、分两层，底层是一个password文本框，在它正上方放一个div用于显示输入的内容；

2、password文本框的字体设成白色或者透明，重新设置光标颜色；

3、使用pointer-events: none让div的鼠标事件穿透到input框产生focus事件；

4、使用等宽字体monospace让光标闪烁的位置符合预期

代码如下，基于elementUI

html

<el-form ref="formRingCode" :inline="true" :model="formRingCode" :rules="rules" @submit.native.prevent><el-form-item label="手环码" prop="ringCode"><el-input ref="ringCode" v-model="formRingCode.ringCode" :maxlength="8" type="password" placeholder="请将光标聚焦于此，等待读取手环" class="w350 input-original" /><div class="w350 input-backup">{{ formRingCode.ringCode }}</div></el-form-item>
</el-form>

css

.input-backup{position: absolute;left: 0;pointer-events: none;border-radius: 4px;box-sizing: border-box;color: #606266;display: inline-block;height: 40px;line-height: 40px;outline: 0;padding: 0 15px;font-family: monospace;
}
.input-original input{color: white;caret-color: #606266;font-family: monospace;&::placeholder {font-family: Helvetica Neue;}&::selection{color: white;}
}
.w350{width: 350px;
}

效果图：

让input框只输入英文相关推荐

如何解决input输入框只输入数字
如何解决input输入框只输入数字在做一些手机号.验证码登录的时候,一般都会对input框的输入进行限制,手机号只能是数字,以后有三种方式: onkeyup = "value=value. ...
input框的输入事件
要求: input框只能输入数字. 问题: 只判断e.keyCode的情况下,在中文输入法中出现了e.keyCode均为229的情况,不论输入数字还是其他. 解决: 修改input框的type为num ...
html判断整数小数点后两位小数点,js控制input框只能输入数字和一位小数点且小数点后面只有两位小数...
js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 212或 0.66; 过滤 00000,1.10,0.00 ...
ios input框无法输入问题
/* ios input框无法输入问题 */ input{ -webkit-user-select:auto !important; } 转载于:https://www.cnblogs.com/liu ...
html页面input框输入不了,input框不能输入问题
input框不能输入问题今天在写程序设计登录页面的时候遇到了一个问题:输入框不能输入! 就是我写着写着想测试一下功能,就发现输入框不能输入了.???还能出现这种问题??就很疑惑,然后就搜了搜无法输入 ...
React：input输入框只能输入英文和特殊字符(可以自定义限制)
React:input输入框只能输入英文和特殊字符(可以自定义限制) 直接上代码: antd3.x版本 render(){return (<Form.Item>{getFieldDecor ...
JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法
JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法获取input框用户输入信息数组存储 var datas = {Id: idData.id,OrderDetailCode: ...
uniapp开发微信小程序input框限制输入
input框输入手机号的约束 <input @input="onlyNum" class="inp" v-model="phone" ...
html5div输入内容,将input框中输入内容显示在相应的div中【三种方法可选】
例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: #div{ width: 175px; height: 100px; margin: 20px 84px; border: ...

让input框只输入英文

思路：

代码如下，基于elementUI

html

css

效果图：

让input框只输入英文相关推荐

最新文章

热门文章