事情是这样的,我正在做一个网页版的模拟器,需要一个文字输入对话框,由于是可以多行输入的,所以选择用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时得到光标所在位置然后将输入的字符删除,也许这会是个解决方案,但这导致了更多的边界情况
各位大神有没有解决办法?
我觉得maxLength可以,别太钻牛角尖了
检测到输入过多字符,直接裁剪写回即可