maxlength中文和英文html,让input maxlength区分中英文
经常有需求,在限制文本框输入长度的时候,区分中英文,如:中文(全角符号类似)占两个字节,英文则占一个,最近审查代码,发现项目上存在类似需求,组内同学实现了网上经常提到的方案,输入后替换,由于监听的是input事件,导致任何越界输入都会出现闪烁的情况,不同于原生效果。
回忆到以前曾经用keydown结合其他事件实现了一版,晚上没事,就尝试重新实现了一下,由于目前项目不考虑非webkit内核浏览器,只在chrome下简单测试了下,有兼容性问题欢迎评论告知
const keyCode = [37, 38, 39, 40, 91, 8, 46, 34, 12, 20]
const specialKeyCode = [65, 67, 88]
function getLength(value) {
return value.replace(/[^ -~]/g, '00').length
}
function slice(value, maxlength) {
if (maxlength && maxlength > -1) {
while (getLength(value) > maxlength) {
value = value.slice(0, value.length - 1)
}
}
return value
}
function checkKeydown(e) {
const code = e.keyCode
return !((e.metaKey || e.ctrlKey) && specialKeyCode.includes(code)) && !keyCode.includes(code)
}
function limit(target, targetValue) {
const value = targetValue || target.value
const maxLength = target.maxLength
let newValue = value
if (maxLength > -1 && getLength(newValue) >= maxLength) {
newValue = slice(newValue, maxLength)
}
if (newValue !== value) {
target.value = newValue
target.focus()
}
}
function compositionEnd(e) {
const target = e.target
const maxLength = target.maxLength
if (maxLength > -1 && getLength(target.value) > maxLength) {
limit(target)
}
}
function limitMaxLength(input) {
input.addEventListener('keydown', e => {
const target = e.target
const maxLength = target.maxLength
const value = target.value
if (maxLength > -1 && getLength(value) >= maxLength && checkKeydown(e)) {
e.preventDefault()
e.stopPropagation()
}
})
input.addEventListener('input', e => {
if (!e.isComposing) {
compositionEnd(e)
}
})
input.addEventListener('compositionend', compositionEnd)
input.addEventListener('paste', e => {
e.preventDefault()
e.stopPropagation()
const target = e.target
const insert = e.clipboardData.getData('text/plain')
const selectionStart = target.selectionStart
const value = target.value
limit(target, value.slice(0, selectionStart) + insert + value.slice(selectionStart))
})
}
limitMaxLength(document.getElementById('input'))
让input maxlength区分中英文
微信打赏
支付宝打赏
maxlength中文和英文html,让input maxlength区分中英文相关推荐
- input框只能输入汉字,数字,英文,数字和英文,禁空格,中文和英文,特殊字符等多种验证
只能输入汉字: <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste=&quo ...
- JS-只能输入中文和英文
<span style="font-family:KaiTi_GB2312;">转自:<a target=_blank href="http://www ...
- 转 JS-只能输入中文和英文
<span style="font-family:KaiTi_GB2312;">转自:<a target=_blank href="http://www ...
- 自己收集整理的微软错误代码大全(中文和英文)
自己收集整理的微软错误代码大全,分别为中文和英文部分,供广大软件开发人员共勉. 微软错误代码 2.1 中文 0 操作成功完成. 1 功能错误. 2 系统找不到指定的 ...
- JS正则验证输入框姓名只能输入中文和英文
js只包含中文和英文 name: [{required: true,message: '请输入姓名',trigger: 'blur'},{pattern: /^[a-zA-Z\u4e00-\u9fa5 ...
- 验证中文和英文姓名 正则表达式
出处:https://blog.csdn.net/kekekeqi/article/details/80881718 参考上面链接文章,以访丢失,再次粘贴一次 ^([\u4e00-\u9fa5]{2, ...
- 【HTML】关于height值设置和显示不同的原因以及font-size对象为中文和英文的区别
关于height值设置和显示不同的原因 height: 100px; CSS中把高度设置为100px,但是实际测量发现高度为125px 这个是因为:笔记本默认显示大小为125%,所以100的125%就 ...
- date日期格式中文和英文显示
date日期格式中文和英文显示 ##背景 由于日志文件里面输出的日期格式是'24-Dec-2019'这样的,但是在写脚本获取日期的时候,一直显示 '24-12月-2019'这样的格式导致匹配不到相应日 ...
- python正则匹配空格+数字+空格_如何批量添加中文和英文数字之间的空格?用正则表达式吧...
1.中文与英文数字混合使用,排版有规范 写作中,我们经常遇到以下中文与英文.数字混用的情况. 我自学python编程,是在xue.cn上进行的.时耗方面,基础功仅需50多小时,加上很多实战,包括初步运 ...
- php判断中文字符长度,JavaScript_JS判断字符串长度的5个方法(区分中文和英文),目的:计算字符串长度(英文占 - phpStudy...
JS判断字符串长度的5个方法(区分中文和英文) 目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var ...
最新文章
- 合唱队形(递增再递减的最长子序列)
- android -------- NDK 入门指南
- mysql dba系统学习(16)mysql的mysqldump备份
- Linux分区如何表示,Linux中硬盘分区的表示方法
- python垃圾回收价格表_深度解析Python垃圾回收机制(超级详细)
- Docker安装及配置镜像加速器
- Linux强行取消挂载
- 2020 年,哪些行业将会遭到 5G 洗礼?
- 21天jmeter打卡day6 配置元件之HTTP信息头+Cookie管理器
- hdoj3652 B-number
- python编程是干嘛的-编程小白必看!Python到底能做什么?
- linux好用的下载工具,四款linux下的好工具
- charset参数 sqluldr2_利用sqluldr2导出数据和sqlldr导入数据的方法
- DOS简介及基本操作
- 网络 - 电脑代理 - 学习/实践
- 移动web开发—— rem布局
- Using the Scheduler Application - JDE Scheduler Job 原理
- 正则表达式 匹配任意长度的字符
- 10-123 A3-3查找产品表中最低的单价
- 如何在iPhone手机里创建网页快捷方式图标(Web Clip)
热门文章
- 安卓root后查看WiFi密码
- JavaScript 数组方法find()
- php英文星期中文星期,英文星期到星期天【星期一到星期天的英文用中文怎么说。发音标准的来。】...
- 【英语学习】星期的词源
- macOS 开发 - 打包 PKG(使用 Packages)
- CoordinatorLayout布局和自定义Behavior
- HTML5系列代码:Visual Studio Code(简称 VS Code)是一个由微软开发
- 新生儿小名大全:农历三月出生的女孩小名
- 离线语音识别应用(windows和Android)
- 小故事大道理--驴子的逃离