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

Mr_lee123

于 2021-08-06 10:11:31 发布

阅读量875

点赞数

分类专栏： web view js html 文章标签： javascript 正则表达式 ios web app

本文链接：https://blog.csdn.net/lihaofeifei/article/details/119423752

版权

js 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

web view

2 篇文章 0 订阅

订阅专栏

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

1、高度自适应

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

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

代码示例：

<div class="input" contenteditable="true"></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();
        }
    }

二、完整代码示例

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

<head>
    <title>input</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<style>
    .input {
        width: 500px;
        height: auto;
        min-height: 20px;
        border: 1px solid #ccc;
    }

    .input[contenteditable]:focus {
        outline: none;
    }
</style>

<body>
    <div class="input" contenteditable="true"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    var inputFlag = true;
    $(".input").on("compositionstart", function () {
        console.log("拼音输入开始")
        inputFlag = false;
    })
    $(".input").on("compositionend", function () {
        console.log("拼音输入结束")
        inputFlag = true;
    })
    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();
        }
    }
</script>

</html>

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

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

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

Mr_lee123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端input、textarea、div（contenteditable ）输入框正则过滤（兼容ios）

目录一、已知问题及解决方案概述：1、高度自适应2、ios无法拼音输入3、ios过滤符号输入二、完整代码示例一、已知问题及解决方案概述：1、高度自适应问题：input无法换行；textarea可以换行但是高度没办法自适应。解决方案：div标签增加contenteditable属性实现div可输入内容，高度自适应。代码示例：<div class="input" contenteditable="true"></div>2、ios无法拼..
复制链接

扫一扫