属性contenteditable="true"属性使元素可以被用户直接编辑。
使用 div
元素并设置 contenteditable="true"
属性,使其可编辑。
实现功能:
- 输入内容达5000字后英文输入法无法输入
- 输入内容达5000字后中文输入法无法输入
- 输入内容达5000字后特殊字符法无法输入
- 输入内容达5000字后中键盘粘贴不会输入
- 输入内容达5000字后鼠标右键粘贴不会输入
- 输入内容达5000字后可以删除,键盘上下左右键可以移动
- 粘贴内容时若粘贴后总字数会超过5000字,则会对粘贴内容进行剪裁,使粘贴后总字数数为5000字
- 输入内容达5000字后托选内容后可以输入中文、英文、特殊字符
- 输入内容达5000字后托选内容后可以进行粘贴,依旧会以5000字的限制将粘贴内容进行剪裁
- 替换读音的之后的总字数超过5000字会替换失败无法替换
中文输入事件
- compositionstart
是指中文输入法开始输入触发,每次输入开始仅执行一次,执行的开始是 end 事件结束了才会触发 - compositonupdate
是指中文输入法在输入时触发,也就是可能得到 shu’mei 这种内容,这里返回的内容是实时的,仅在 start 事件触发后触发,输入时实时触发 - compositionend
是指中文输入法输入完成时触发,这是得到的结果就是最终输入完成的结果,此事件仅执行一次。
需要特别注意的是:该事件触发顺序在 input 事件之后,故而需要在此事件的处理逻辑里调用一次 input 里边的业务逻辑