移动端input、textarea、div（contenteditable ）输入框正则过滤（兼容ios）

目录

一、已知问题及解决方案概述：

1、高度自适应

2、ios无法拼音输入

3、ios过滤符号输入

 二、完整代码示例

---

一、已知问题及解决方案概述：

1、高度自适应

问题：input无法换行；textarea可以换行但是高度没办法自适应。

解决方案：div标签增加contenteditable 属性实现div可输入内容，高度自适应。

代码示例：

2、ios无法拼音输入

问题：on("input")监听input、textarea输入事件，ios无法拼音输入中文。

解决方案：使用compositionstart、compositionend监听输入事件。

原理：input监听是键盘输入按键按下了就触发事件，compositionstart 和 compositionend，会在选定文字后才触发input 事件。

代码示例：

var inputFlag = true;
    $(".input").on("compositionstart", function () {
        console.log("拼音输入开始")
        inputFlag = false;
    })
    $(".input").on("compositionend", function () {
        console.log("拼音输入结束")
        inputFlag = true;
    })

3、ios过滤符号输入

问题：在ios系统下，例如使用replace对"@"进行替换，如下图在连续点击这个按钮时，会将前面已输入内容删除掉（正则匹配中英文、数字、指定符号）。

 解决方案：使用变量保存上一步已输入内容，在遇到不匹配字符时，将已保存内容替换当前输入内容，达到replace效果。使用div模拟textarea输入时，内容框重新赋值后光标会重置在文字最前，还需调用自定义po_Last_Div方法进行重新定位（使用input、textarea无光标问题）。

 代码示例：

var valHistory = ''; //保存输入历史，当输入不符合校验规则时使用历史内容替换
    $(".input").on('keyup keydown', function () {
        var _this = this;
        setTimeout(function () {
            if (inputFlag) {
                var reg = /[^\w\u4E00-\u9FFF\.\…\:\：\；\\/\;\=\-\，\“\”\。\,\、\?\？\"\!\，\！\!\(\)\（\）\*]/g;//定义正则表达式 （中英文、数字、指定符号）取反匹配
                if ($(_this).text().search(reg) != -1) {//search()方法：用户输入的值如果不符合正则表达式，就返回-1，当前场景如果符合表达式，即“中英文、数字、指定符号”以外字符
                    $(_this).text(valHistory);
                    po_Last_Div($(_this)[0]); //重新定位光标位置
                }
                valHistory = $(_this).text();
            }
        }, 0)

    });

 //定位div(contenteditable = "true")
    function po_Last_Div(obj) {
        if (window.getSelection) {//ie11 10 9 ff safari
            console.log("safari-getSelection--", obj)
            obj.focus(); //解决ff不获取焦点无法定位问题
            var range = window.getSelection();//创建range
            console.log("range--", range)
            range.selectAllChildren(obj);//range 选择obj下所有子内容
            range.collapseToEnd();//光标移至最后
        } else if (document.selection) {//ie10 9 8 7 6 5
            console.log("ie-selection--", obj)

            var range = document.selection.createRange();//创建选择对象
            //var range = document.body.createTextRange();
            range.moveToElementText(obj);//range定位到obj
            range.collapse(false);//光标移至最后
            range.select();
        }
    }

 二、完整代码示例

参考文章：https://blog.csdn.net/my98800/article/details/64442105

https://www.cnblogs.com/pyspang/p/11402947.html

 https://blog.csdn.net/longlc123/article/details/79556078