ios的textarea中用拼音输入汉字拼音也会自动输入到输入框中

最近遇到了一个特别恶心的bug,做一个多行文本输入框,用textarea,之后发现在安卓和客户端上能正常显示和输入,而在苹果手机输入汉字的时候,汉字的拼音会自动联想输入到输入框中,十分影响体验,输入汉字的时候,会把你敲的拼音和你确定选择的汉字一起显示在输入框中,要多恶心有多恶心。

解决方法一:

把textarea用div替代。

HTML:
<div contenteditable="true" id="address1" class="address1"
  placeholder="请输入联系地址" 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表单提交时,不能获取到这个模拟输入框的值自动提交,可以弄一个隐藏表单,取出这个模拟输入框的值赋值给他再提交。

解决方法二:

查阅相关资料,发现是和输入框的输入事件(input的事件有关),可以监听他的输入事件,在输入前,输入时,输入后进行操作,避免ios手机输入框实时监听你按下键盘,这样你只有按下完成的拼音,选择完你要打的字之后,这个input的事件才会触发。

        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)
        });

解决方法三:

这是我最后才发现的解决方法,原理不知道,textarea中不能使用oninput事件,使用了的话苹果手机就会出现那种情况,其它系统不会。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。