CNode

这个问题不简单,textarea有没有办法自己控制字符数量

问答
Zzengming00发布于6 年前最后回复6 年前2 回复3848 浏览0 收藏

事情是这样的,我正在做一个网页版的模拟器,需要一个文字输入对话框,由于是可以多行输入的,所以选择用textarea

然而,textarea对换行符的处理是只有一个'\n'字符,而模拟器要求的换行符是'\r\n',这当然没问题,替换一下就可以:textarea.value.replace(/\n/g, '\r\n').length

那么问题来了,当需要限制输入字符的数量时,由于'\n'和'\r\n'长度不同,导致textarea.value.replace(/\n/g, '\r\n').length达到要求的数量时,无法阻止用户继续输入

输入的来源主要有三种: 英文输入、中文输入、剪切板粘贴输入

        textarea.onkeydown = function(e) {
            e.preventDefault();
        }
        textarea.onpaste = textarea.onkeydown;
        textarea.onkeyup = textarea.onkeydown;

在onkeydown、onpaste中调用e.preventDefault()可以实现禁止英文输入和剪切板粘贴输入,但无法禁止掉中文输入

理论上在oninput事件中使用e.preventDefault()就能实现目标,然而oninput的事件对象Cancelable是false的,也就是说e.preventDefault()是不起作用的

maxLength属性也是直接value.length比较的,因此maxLength属性也是没用的,另外我还尝试了输入一个换行符就maxLength-1这样的操作,然而存在边界特例,比如限制两个字符,先输入了一个字符再输入一个换行,实际长度应该是3

另外我还尝试了在oninput时得到光标所在位置然后将输入的字符删除,也许这会是个解决方案,但这导致了更多的边界情况

各位大神有没有解决办法?

查看回复

回复 (2)

Z
zy445566#1·6 年前

我觉得maxLength可以,别太钻牛角尖了

Z
zhennann#2·6 年前

检测到输入过多字符,直接裁剪写回即可

参与回复
登录后即可参与回复。登录