ios的textarea中用拼音輸入漢字拼音也會自動輸入到輸入框中

最近遇到了一個特別惡心的bug，做一個多行文本輸入框，用textarea憨降，之后發(fā)現(xiàn)在安卓和客戶端上能正常顯示和輸入，而在蘋果手機輸入漢字的時候该酗，漢字的拼音會自動聯(lián)想輸入到輸入框中授药，十分影響體驗士嚎，輸入漢字的時候，會把你敲的拼音和你確定選擇的漢字一起顯示在輸入框中悔叽，要多惡心有多惡心莱衩。

解決方法一：

把textarea用div替代。

HTML:
<div contenteditable="true" id="address1" class="address1"
  placeholder="請輸入聯(lián)系地址" name="address1" oninput="checkLength()"
  style="border: none;text-algin:right;direction: rtl;">
</div>

css:
.address1:empty:before {
    content: attr(placeholder);
    font-size: 14px;
    color: #666;
    border: none;
}

.address1:focus:before {
    border: none;
}

.address1:focus {
    border: none;
    outline: none;
}

但是在submit表單提交時骄蝇，不能獲取到這個模擬輸入框的值自動提交膳殷，可以弄一個隱藏表單，取出這個模擬輸入框的值賦值給他再提交九火。

解決方法二：

查閱相關(guān)資料赚窃，發(fā)現(xiàn)是和輸入框的輸入事件（input的事件有關(guān)），可以監(jiān)聽他的輸入事件岔激，在輸入前勒极，輸入時，輸入后進行操作虑鼎，避免ios手機輸入框?qū)崟r監(jiān)聽你按下鍵盤辱匿，這樣你只有按下完成的拼音，選擇完你要打的字之后炫彩，這個input的事件才會觸發(fā)匾七。

        var flag = true;
        $("#address1").on("compositionstart",function(){
            flag = false;
        })
        $("#address1").on("compositionend",function(){
            flag = true;
        })
        $("#address1").on("input",function(){
            var _this = this;
            setTimeout(function(){
                if(flag){
                    console.log($(_this).val());
                }
            },0)
        });

解決方法三：

這是我最后才發(fā)現(xiàn)的解決方法，原理不知道江兢，textarea中不能使用oninput事件昨忆，使用了的話蘋果手機就會出現(xiàn)那種情況，其它系統(tǒng)不會杉允。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者