Canvas元素實現文字的監聽輸入和主流瀏覽器的相容bug

一、一頓整理 1.因為Canvas無法直接記錄文字選中，直接輸入，所以需要用到隱藏的input或者textarea文字框。 2.因為鍵盤的keydown,keyup,keypress瀏覽器相容問題很嚴重，所以改用compositionstart，compositionend，input監聽隱藏的input文字輸入框的按鍵事件，然後拿到此時文字框的值傳送出去；（並且避免了中文輸入法下的回車，空格，shift等無法監聽keycode值，一直是229） 3.下面測試

二、一般瀏覽器（解決中文狀態下，回車內容留在文字框內，不傳送出去，原因：沒有監聽到） 4.先描述在除了百度和搜狗之外的這些瀏覽器的事件，中文輸入法狀態下，觸發三個動作，一開始按鍵，就觸發了compositionstart,然後按空格，將中文輸入到隱藏的文字框內，或者按shift，Enter鍵，將中文輸入法上輸的中文轉成拼音字母，輸入上去，此時這三個動作都會觸發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，只要成功傳送，不殘留就行了。