js实现输入长度的限制,兼容中文输入的办法

最新推荐文章于 2023-06-14 17:05:33 发布

原创

最新推荐文章于 2023-06-14 17:05:33 发布 · 1.5k 阅读

收录于

复合输入的长度限制

我们在项目中,可能会经常遇到输入框输入汉字 + 字母/符号等混合内容,并要对内容进行长度限制的需求.

很多朋友喜欢直接对拿到的输入的value进行长度限制,但是实际做过的朋友可能都会遇到问题,当输入中文、日文这种需要多个字母拼成一个文字的语言时,往往文字没有输入完成,拼写的文字就已经超出长度的限制了.从而导致,无法输入;

为了要解决这个问题,需要知道,用户正在输入的文字是否是复合输入.
如果是复合输入,我们要想办法监听复合输入的结果,而不是输入的过程.
如果是非复合输入,我们只需要监听oninput事件就可以了
所以,我们这里为了解决问题,需要用到compositionstart、compositionend、input这几个事件来实现复合输入的长度限制

// 开关,是否是复合输入
let isComposition = false;
// 可以输入的最大长度
const maxLength = 10;

// 长度验证规格
function

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不知名前端

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

input输入框限制输入长度、限制输入内容

weixin_51465537的博客

07-19

1万+

在vue+elemnetUI的前端项目中，使用input输入框进行内容的输入的时候，有的时候会要求限制输入字符长度，有的会限制输入的内容。以下是几个简单的介绍。

参与评论您还未登录，请先登录后发表或查看评论

MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength

weixin_33919941的博客

05-20

162

返回目录为什么要对minLength和maxLength这两个方法进行扩展呢,是因为这样一个需求,在用户注册时,可以由用户自己决定他们输入的字符,中文,英文,数字均可,这样做了之后,使用户的体验更好,但对于程序来说就有些麻烦了,因为我们的Length方法只针对英文字符和数字而言的原因1:事实上,真实的数据存储里,中文和全角他们占用的是两个字符的空间,所以,我们在验证中文时,应该考虑到这...

vant form表单限制长度

hello world

06-14

1051

vant form表单限制长度。

input输入框为数字(number)类型时maxlength属性不起作用

小涛Dirge

11-12

2123

使用html代码解决 <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)" /> 使用js代码解决 //输入框为数字类型时防止maxlength属性不起作用 $('input').bind('input propertychange', function() {...

JS 文本框 maxlength（中文字符长度）解决方案

bearhoop IT之道

08-21

9082

从CSDN 上找的... 1，JS function limitLength(value, byteLength, title, attribute) {//限制输入框字数 var newvalue = value.replace(/[^\x00-\xff]/g, "**"); var length = newvalue.length;

限制textarea 文本框的长度(收集了几个办法)

ading0210的博客

04-17

1003

文章参考地址：http://blog.csdn.net/nhconch/article/details/4223076 需求背景：前几天，因为客户有一个需求说，需要对一个评论（一个textarea文本框）的长度进行限制，简单的理解就是这个文本框只能输入100个字符，然后就不能在输入了！实现方案一：用maxlength属性 <textarea maxlength=...

js限制文本框输入长度两种限制方式(长度、字节数)

技术人生的博客

12-09

1万+

功能/特点： 1.实时显示可输入的字数（字节数） 2.两种限制方式（长度、字节数） 3.中文输入法下可正常使用，无BUG 4.同一页面可以使用多个，相互不干扰limit.js 复制代码代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//...

js如何判断当前文本的输入状态——中文输入法的那些坑

小敏哥的专栏

07-09

2万+

相信各位在平时接需求的时候肯定会遇到这样的一些需求，例如，要求输入框限制输入长度，限制输入类型，限制只能英文输入，限制只能输入大写字母等等，这时候我们一般的思路无非两种，一种是弹出特定的键盘，第二种是在输入的过程中对输入内容进行正则匹配，然后根据自己的需求对input框进行赋值。弹出特定键盘可以通过对input框的type属性进行赋值，但由于不同的浏览器对弹出的输入框都有比较严格的限制，并且弹出之...

vue列表长度限定_vue双向绑定数据限制长度的方法

weixin_39842237的博客

01-14

1519

vue双向绑定数据限制长度的方法vue双向绑定数据如何限制长度？具体方法请阅读文章问题描述vue中输入框v-modle 双向绑定的数据；在需要的业务场景下需要对其进行字数长度限制；解决方案可以使用以下方法：方法一：//方法一：输入框添加keypress方法；然后函数为：maxLength(attr,length){let keyCode = event.keyCode;console.log("k...

js模拟html5的maxLength效果

寂寥人生

07-03

720

版本一网上找的 promiseNum('#contnet', 10); function promiseNum(id, num) { $(id).bind("input propertychange", function () { var a = $(id).val(); if (a.length > 10) { $(id).val($(id).val().substr(0,num));

JavaScript實現TextArea的MaxLength效果

mfs515156的专栏

10-20

471

Normal 0 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Font Definitio

JQuery实例扩展，限制输入长度。

renpinghao的专栏

02-15

6003

//描述：JQuery实例扩展，限制输入长度。 //$("#abc").maxLength(250) maxLength: function(maxLength) { var $textBox = this; $textBox.unbind("input propertychange change"); $textB

js限制输入框输入只能输入8个字或16个字母数字（1个汉字等于2个字母/数字）

qq_41775006的博客

06-28

2129

首先输入框限制只能输入字母、数字、汉字（我这里用了iview的input组件） template <Input v-model="changeValue" class="changeValue" placeholder=" 请输入昵称" @on-keyup="changeValue = changeValue.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')" /> script data(){ return{ changeValue:'' } }

javascript中汉字长度的限制

ahaitongxue的专栏

03-11

1247

在javascript中"abcdef".length为6，"你好啊".length为3，而不是像我们认知的那样将一个汉字当做两个字符来处理。这时候如果有这么一个需求：无论某一字符串text中是全英文还是有中文有英文还是只有中文，都只显示固定长度比如只想显示4个字符(想让一个汉字按两个字符计算) 即"abcdef"经过处理后返回"abcd","你好啊"经过处理后返回"你好" 现有这

Js限制输入固定个数中文字符长度

逍湘子

07-15

1346

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。比如：中文字符20个字字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN const chString = (str) => { let leng = 0 f

javascript限制输入框输入中文时的字节长度, 且避免输入过程中的字符问题

leiax00

04-10

1355

在日常使用过程中有一些特殊情况, 需要限制输入框的字节数, 注意是字节数而不是字符数;对于字符数, 我们简单的用maxlength就可以解决对于字节数, 如果是单字节字符当然也可以通过maxlength来限制, 但是对于多字节字符, 显然就无法正常限制了;而对于常用编码UTF-8来说, 字符的占用字节数范围为 [1:6], 因此需要进行相关计算以上方法通过测试, 实际可用;但是实现较为复杂, 如果你能有更简单的方法, 还请告知一二~

JS限制输入框输入的字节数

u010007013的博客

10-22

1040

之前写过获得输入框输入的字节数 JS获得输入框输入的字节数那么如果想限制输入框输入的字节数该怎么做呢？

js中限制字符串输入中英文字符的长度

yangtaohongyang的博客

01-07

815

js中如何限制字符串输入中英文字符的长度。这是自己写的一个方法: [code="java"]function checklength(str){ var v_temp = str.replace(/^\s+/g, '').replace(/\s+$/g, '');//del the blankspace, like trim(). if(v_temp.length!=0) str = v...

input输入长度与限制内容