文本框字符限制、focus光标定位

一、为一个元素的所有子元素设置统一样式：.className * { color: #6666 }


二、正则表达式：

1、去除所有HTML标签只保留文字： /<\/?.+?\/?>/
2、去除空格：/\s+/
　　\s：匹配任何空白符（空格、制表符、换页、换行…），等价于[ \f\n\r\t\v]
　　\s+：匹配上述任意多个字符

　　"." 表示除\n之外的任意字符
　　"*" 表示匹配0-无穷
　　"+" 表示匹配1-无穷

 

三、设置contenteditablefocus时，光标移动文本最后。

setFocu($(".className"));
function setFocu(ele) {
　　ele = ele[0];
　　ele.focus();
　　var range = document.createRange();
　　range.selectNodeContents(ele);
　　range.collapse(false);

　　var sel = window.getSelection();
　　sel.removeAllRanges();
　　sel.addRange(range);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
    <title>Title</title>
    <script src="../commonJs/jquery-3.1.0.min.js"></script>
    <style>
        * {box-sizing: border-box;}
        .txtBox {
            width: 100%;
            height: 300px;
            outline: none;
            padding: 10px;
            border: 1px solid #FCA700;
        }

        .txtBox:empty::after {
            display: block;
            content: attr(placeholder);
            color: #999;
        }

        .lengthTip {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="txtBox" contenteditable="true" placeholder="请输入内容"></div>
    <p class="lengthTip"><span class="txtLength">0</span> / 500</p>
    <script>
        $(function () {
            txtObj.init();
        });

        var txtObj = {
            getLength: function () {
                var txtBox = $(".txtBox");
                txtBox.keyup(function () {
                    var reg = /<\/?.+?\/?>|\s+/g;
                    var txtLen = txtBox.html().replace(reg, "").length;
                    $(".txtLength").html(txtLen);
                });
            },

            getTxt: function () {
                $(".txtBox").html(txtJson.txt);
                txtObj.setFocus($(".txtBox"));
            },

            // 设置contenteditable光标位置
            setFocus: function (ele) {
                ele = ele[0];
                var range = document.createRange();
                range.selectNodeContents(ele);
                range.collapse(false);

                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            },

            init: function () {
                txtObj.getLength();
                txtObj.getTxt();
            }
        }

        var txtJson = {
            "txt": '<div class="txtContent"><span>内容只包括文本，不包括html标签，空格、换行……</span></div>'
        }
    </script>
</body>
</html>

 

posted @ 2021-04-29 14:51  し7709  阅读(287)  评论(0)    收藏  举报