html输入框只能输入文字,input文本框强制输入指定文字的方法以及IE11的兼容

article/2025/9/14 4:09:15

背景:最近开发的韩国项目,在用户姓名输入框一栏中,要求只能输入韩文,通常用到onkeyup和onafterpaste两个事件来触发方法,并在方法中进行校验,但是在IE浏览器中,出现了一种情况,就是韩文单词拼写未完成的时候,会直接进行校验并显示,如下图实例所展示,并不是需要想要的结果,所以需要进行IE兼容;

bVbppcK?w=732&h=508

记录一下整个流程:

标签绑定事件

标签绑定了onkeyup键盘抬起事件以及onafterpaste粘贴文本进输入框两个事件,当有这两个操作时,就会触发相应的校验方法;

校验方法

keyup (ev) {

if (!this.imeStatus) {

ev.target.value = ev.target.value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣A-Za-z0-9]/g, '')

}

},

当事件触发时,首先会有个变量imeStatus校验是否是IE浏览器,然后再根据正则校验进行输入框值的替换,注意:替换的应该是当前正在输入的值,并非整个输入框包括已经输入的所有值;

if (getBrowser() === 'IE') {

window.addEventListener('


http://chatgpt.dhexx.cn/article/9sA43qih.shtml

相关文章

jquery对表格行列的操作-jquery动态增加表格行或者列

jquery对表格的操作是老生常谈的问题。最近项目中用到了&#xff0c;今天在这里分享一下&#xff01; 效果大体如下&#xff1a; 分享一下代码吧&#xff01; html <div class"table-responsive" id"Bk_table" style"display:none;">&l…

动态改变Input和Textarea值Vue数据没有绑定的解决办法

背景&#xff1a; 我在循环里面的input框需要限制输入的值的类型&#xff0c;如果我绑定了change的方法的话 首先需要失去焦点才能生效&#xff0c;如果不失去焦点直接点击确定按钮是不能触发事件的 值还是原来的 &#xff0c;第二个如果层级多的话需要把索引什么的传过去用$se…

HTML 限制文本框只能输入数字 onkeyup+onafterpaste

限制文本框只能输入数字 < input onkeyup "if(isNaN(value))execCommand(undo)" onafterpaste "if(isNaN(value))execCommand(undo)" > < input name txt1 onchange "if(/\D/.test(this.value)){alert(只能输入数字);this.value;}" …

JAVAFX的table样式修改

直接上代码吧&#xff0c; .table-view{-fx-font-size: 16; 修改表格字体的大小 } 表头的背景设置 .table-view .column-header-background {-fx-background-color: #DBDBDB; } 表头设置 .table-view .column-header{-fx-border-color:#ffffff; -fx-border-width:0 1 …

bootstrap-table样式修改

bootstrap-table修改后的效果如下 1.删除边线 <style>.table>tbody>tr>td{border-top: 1px solid transparent !important;border-right: 1px solid transparent !important;border-left: 1px solid transparent !important;}.table>thead>tr>th{bord…

HTML常用table样式

转自&#xff1a;http://atgoingguoat.iteye.com/blog/2074431 常用table样式&#xff0c;备自己常年复制用。 效果图 Java代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d…

一文图解自定义修改el-table样式

我们在使用element UI库的时候&#xff0c;确实给我们带来了许多便利&#xff0c;但是&#xff0c;往往组件库无法满足我们的业务需求&#xff0c;这时就需要我们在组件库的基础上修改样式。 今天水香木鱼一篇图解文章教大家如何在组件库的基础上去修改样式&#xff0c;今天我们…

el-table样式美化

<!-- 列表展示 --><el-table:data="tableData"v-loading="loading2"borderclass="mg-btm-20

ant design table样式修改合集

目录 1. 修改列头样式 改变列头文字颜色 改变列头背景颜色 2. 修改行样式 改变行文字颜色 隔行换色 3.列头居中&#xff0c;列居左/右 4.列表自动滚动 5. 列头超出省略并可以点击全显示 6.Table 点击某一行时改变选中行的边框颜色 7.Table 移入某一行时改变行的颜色 …

Element-UI:el-table样式修改

以下样式代码在less环境下生效&#xff0c;最终样式如下。 样式代码&#xff0c; /*修改table 表体的背景颜色和文字颜色*/ /deep/ .el-table {background-color: transparent;th,td {background-color: transparent;}.el-table__expanded-cell {background-color: transp…

ElementUI table 样式修改

一、概述 element-ui table 默认是白色背景&#xff0c;现在需要修改为黑色背景&#xff0c;白色文字。 二、代码实现 css样式 <style>/*修改table 的背景颜色和文字颜色*/.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{border-color: black;…

table 样式美化

1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: 1 <!-- CSS goes in the document HEAD or added to your external stylesheet -->2 <style type="text/css">3 table.gridtable {4 font-family: verdana,arial,sans-serif;5 font…

el-table 样式自定义

1.el-table 样式自定义 效果图: // tableRowClassName 通过值判断是否添加加class, // header-cell-style 头部样式 // row-style 行的样式 // cell-style 每个item 的样式 <el-table style"margin-bottom: 20px" :data"pmPopList" :row-class-name&q…

HTML table样式

如果想在网页中建一个如下table表格应该怎么做呢&#xff1f; 首先建一个表<table> <table>/*table标签就是建一个表格*/<tr>/*tr标签就是table row&#xff0c;即为表格中的一行*/<th>学号</th>/*th标签即table head&#xff0c;就是表头*/<…

Vue表格table样式

新入职的公司让我学习下Vue&#xff0c;以前没怎么学过&#xff0c;最近开始学习&#xff0c;记录下每天学习的内容&#xff0c;借鉴了很多前辈们的资料&#xff0c;如有冒犯&#xff0c;还请原谅。 开始我做的是动态表格&#xff0c;但是发现不会调整宽度&#xff0c;于是就改…

html中table美化,漂亮的css table样式

工作中发邮件通知人员样式总是一个麻烦事,工作的严肃性不能让邮件样式太花哨,但是又不能太简陋, 所以找了下面的table样式和大家分享。 效果如下图所示: 漂亮CSS Tables-幸凡学习网 body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-…

关于bootstrap--表格(table的各种样式)

1、table-striped&#xff1a;斑马线表格 2、table-bordered&#xff1a;带边框的表格 3、table-hover&#xff1a;鼠标悬停高亮的表格 4、table-condensed&#xff1a;紧凑型表格(单元格的内距由8px调至5px。) 5、table-responsive&#xff1a;响应式表格(当你的浏览器可视区…

Android MotionEvent理解

Java层MotionEvent对应C层MotionEvent Java层MotionEvent类下面的mNativePtr指向C层MotionEvent   C层MotionEvent成员变量如下 class MotionEvent : public InputEvent { ………… protected:int32_t mAction; //事件的行为&#xff0c;例如Down,Move,Up&#xff0c;如果是…

【Android 事件分发】MotionEvent.ACTION_DOWN 按下事件分发流程( Activity | ViewGroup | View )

Android 事件分发 系列文章目录 【Android 事件分发】事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) 【Android 事件分发】事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -&#xff1e; PhoneWindow -&#xff1e; De…

Android MotionEvent详解

在前边几篇博文中&#xff08;《图解Android事件传递之ViewGroup篇》&#xff0c;《图解Android事件传递之View篇》&#xff09;&#xff0c;我们已经了解了android触摸事件传递机制&#xff0c;接着我们再来研究一下与触摸事件传递相关的几个比较重要的类&#xff0c;比如Moti…