这个问题不简单,textarea有没有办法自己控制字符数量
发布于 4 年前 作者 zengming00 3019 次浏览 来自 问答

事情是这样的,我正在做一个网页版的模拟器,需要一个文字输入对话框,由于是可以多行输入的,所以选择用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 回复

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

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

回到顶部