美文网首页
H5 - input标签iOS原生键盘中文录入异常

H5 - input标签iOS原生键盘中文录入异常

作者: 西半球_ | 来源:发表于2021-01-12 14:49 被阅读0次

    最近在input搜索框中添加正则时发现,iOS原生键盘录入中文总是录入异常,安卓手机无异常,出现异常的写法:
    html

    <input id="inputId" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="请输入"
    maxlength="30"
    onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">
    

    处理之后:

    html

    <input id="inputId" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="请输入"
    maxlength="30">
    

    js

    //实时录入时通过正则剔除特殊字符(只能输入中文数字字母空格),此方式可解决iOS原生键盘中文录入异常
    var flag = false;
    $('#inputId').on({
        'compositionstart': function () {
            flag = true;
        },
        'compositionend': function () {
            flag = false;
            if (!flag) {
                document.getElementById("inputId").value = document.getElementById("inputId").value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g, '');
            }
        },
        'input propertychange': function () {
            if (!flag) {
                document.getElementById("inputId").value = document.getElementById("inputId").value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g, '');
            }
        }
    });
    

    相关文章

      网友评论

          本文标题:H5 - input标签iOS原生键盘中文录入异常

          本文链接:https://www.haomeiwen.com/subject/rtxeaktx.html