让input框只输入英文

news/2024/4/17 16:58:18

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

扫码枪在扫完码时会自动回车,这时如果是中文输入法就会触发输入法联想,再加一个回车,那么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;}
}
效果图:

2023-05-24_225034


https://www.xjx100.cn/news/344576.html

相关文章

session反序列化漏洞

文章目录 前提知识php代码session_startsession.upload_progress.enabledsession.use_trans_sidphp.ini中Session配置 初步复现原理案例 无$_SESSION变量赋值案例&#xff1a;Jarvis-PHPINFOpoc1.html改流量包 前提知识 php代码 <?php error_reporting(0); ini_set(sessi…

面试问题汇总

最近面试了几家公司&#xff0c;对问到的问题汇总一下。 Unity 是左手坐标系还是右手坐标系? 这个题靠记忆答的答错了&#xff0c;是左手坐标系。 大拇指指的方向是X轴&#xff0c;食指指的方向是Y轴方向&#xff0c;中指指的方向Z轴方向。 场景中游戏物体Activity为false,G…

github push

几个地方收集来&#xff0c;一个可行的&#xff0c;包括坑。方便大家使用 GitHub常见操作&#xff1a;生成ssh公钥&#xff0c;clone&#xff0c;push_选择ssh方式,用户需要在计算机中生成ssh keys,用来从github中push或pull 生成_大王我亲自来巡山的博客-CSDN博客 GitHub中c…

Chapter5: SpringBoot与Web开发2

接上一篇 Chapter4: SpringBoot与Web开发1 10. 配置嵌入式Servlet容器 SpringBoot默认采用Tomcat作为嵌入的Servlet容器&#xff1b;查看pom.xml的Diagram依赖图&#xff1a; 那么如何定制和修改Servlet容器的相关配置? 下面给出实操方案。 10.1 application.properties配…

微信小程序通过 node 连接 mysql——方法,简要原理,及一些常见问题

前言 博主自己在22年夏天根据课程要求做了一个小程序连接阿里云服务器的案例&#xff0c;在最近又碰到了相应的需求。 原参考文章&#xff1a;微信小程序 Node连接本地MYSQL_微信小程序nodejs连接数据库_JJJenny0607的博客-CSDN博客 ,还请多多支持原作者&#xff01; 第二次…

128. 最长连续序列【中等】

题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1…

第六章 社会主义发展及其规律

一. 单选题&#xff08;共40题&#xff0c;60分&#xff09; 1. (单选题)全部马克思主义学说的核心和理论结论是( ) A. 科学社会主义 2. (单选题)科学社会主义的直接理论来源是( ) C. 19世纪初期以圣西门、傅立叶、欧文为代表的空想社会主义 3. (单选题)社会主义实现…

Redis如何做到内存高效利用?过期key删除术解析!

大家好&#xff0c;我是小米&#xff0c;一个热衷于分享技术的小伙伴。今天我要和大家探讨一个关于 Redis 的话题&#xff1a;删除过期key。在使用 Redis 进行数据存储和缓存时&#xff0c;我们经常会遇到过期数据的处理问题。接下来&#xff0c;我将为大家介绍为什么要删除过期…