Canvas元素实现文字的监听输入和主流浏览器的兼容bug

ゝ一纸荒年。 2022-03-15 08:10 62阅读 0赞

一、一顿整理 1.因为Canvas无法直接记录文字选中，直接输入，所以需要用到隐藏的input或者textarea文本框。 2.因为键盘的keydown,keyup,keypress浏览器兼容问题很严重，所以改用compositionstart，compositionend，input监听隐藏的input文本输入框的按键事件，然后拿到此时文本框的值发送出去；（并且避免了中文输入法下的回车，空格，shift等无法监听keycode值，一直是229） 3.下面测试

二、一般浏览器（解决中文状态下，回车内容留在文本框内，不发送出去，原因：没有监听到） 4.先描述在除了百度和搜狗之外的这些浏览器的事件，中文输入法状态下，触发三个动作，一开始按键，就触发了compositionstart,然后按空格，将中文输入到隐藏的文本框内，或者按shift，回车键，将中文输入法上输的中文转成拼音字母，输入上去，此时这三个动作都会触发compositionend事件，而不触发input事件，input事件在中文状态下，每一次按字母，数字键触发，而按回车，空格，shift不触发。 5.每一次触发compositionstart事件，都会让变量isPinyin=true，表示进入中文输入状态； 6.所以，此时可以compositionend的动作监听，拿到文本框的内容，发送出去，并清空自身内容，然后才将变量isPinyin=false，表示之后进入非中文输入状态。（因为只有中文状态下开始输入文字，才会触发compositionstart） 7.进入非中文输入状态下，不触发compositionstart和compositionend事件，触发input,做判断，并且是非中文，isPinyin==false，然后直接每一次输入，都发送文本内容，然后自空；所以Input事件下的操作，可以设置为在isPinyin==false，下发送，自空文本，中文状态下，进入是compositionend,所以在compositionend事件内也不要做isPinyin的判断？ 三、百度和搜狗浏览器加微软输入法，QQ拼音输入法（这两个浏览器的重复问题） 8.在谷歌和搜狗浏览器下，在微软默认输入法和QQ拼音输入法的中文状态下，回车，空格，shift按键，都有触发input和compositionend两个事件，先是isPinyin==true触发compositionend,再是改变成false，触发input事件中，isPinyin==false条件内的发送，清空操作，导致重复发送，纠正：在compositionend事件下，添加对百度和搜狗浏览器的代理检测条件，当非百度，搜狗浏览器的条件下，才执行发送文本内容动作。（为什么不在input事件内加判断，而是选择让百度、搜狗浏览器使用微软，QQ输入法下，compositionend中的事件不触发，因为在这两个输入法搭配下，百度，搜狗浏览器一般输入事件（搜狗和百度输入法下，回车/空格/shift触发的是input，而没有compositionend，与其他浏览器相反）而这两个是输入法下，先触发compositionend，再触发input，所以是禁掉composition下的事件触发） 四、失焦 9.失焦时，设置定时器，自动聚焦在隐藏的文本框； 五、点击确定，或者回车后，依然有文本框 10.判断文本输入结束，输入键盘销毁时，将文本框自空，并且将文本框隐藏起来（不用失焦，可能逻辑会混乱） 11.总的事件，单独的事件处理全部放在一个js文件内，不然放在总的js文件内，会导致耦合性太严重； 六、残留文字的bug，只要成功发送，不残留就行了。