禁止对文本框内指定字符（部分内容）进行修改

最新推荐文章于 2022-08-09 16:40:41 发布

lfq761204

最新推荐文章于 2022-08-09 16:40:41 发布

阅读量1.7k

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/lfq761204/article/details/117361453

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、前言

在使用文本控件input和textarea时，有时想禁止对其中某些特殊文本进行编辑，比如由程序生成的某些自定义标记[img src=...]等，不希望因用户修改而破坏设定好的结构与内容。这时可以通过文本控件的selectionStart和selectionEnd属性获取当前光标位置，通过正则表达式的exec方法获取文本中禁止编辑内容的位置，然后对两者的位置进行比对，如果光标位于禁止编辑内容中，则将光标重新定位于禁止编辑内容之外，以达到禁止编辑的目的。

二、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>禁止对文本输入框内指定字符进行修改</title>
    <script>
        //对textarea控件的onclick和onkeyup事件添加以下函数
        function SetSelected() {
            //获取textarea对象
            var textarea=document.getElementById("textarea");
            //获取文本框内选择文字的开始位置和结束位置
            //如果未选择内容，开始位置和结束位置均为光标所在位置
            var selectionStart=textarea.selectionStart;
            var selectionEnd=textarea.selectionEnd;
            //定义一个正则表达式，匹配文本中禁止编辑的部分，范例中是匹配[]内的内容
            var pat=new RegExp("\\[.*?\\]","gi");
            var result;
            //通过正则表达式的exec方法，循环匹配文本中所有不可编辑部分
            //exec方法返回值的index属性表示当前匹配项在检索文本中的起始位置，exec方法执行后，正则表达式的lastIndex属性表示之前匹配项的最后一个字符的位置
            while(result=pat.exec(textarea.value)) {
                var start=result.index; //匹配项（禁止编辑内容）的起始位置
                var end=pat.lastIndex;  //匹配项（禁止编辑内容）的结束位置
                //如果当前光标位于禁止编辑内容中，则把光标重新定位到禁止编辑内容之后，并退出函数
                if((selectionStart>start&&selectionStart<end)||(selectionEnd>start&&selectionEnd<end)) {
                    textarea.selectionStart=end;//将光标定位到禁止编辑内容之后
                    return;
                }
            }
        }
    </script>
</head>
<body>
    <textarea id="textarea" cols="50" rows="5" onclick="SetSelected();" onkeyup="SetSelected();">可编辑文本可编辑文本[我不可编辑]可编辑文本[但你可整块删除我]可编辑文本</textarea>
</body>
</html>

lfq761204

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
禁止对文本框内指定字符（部分内容）进行修改

在使用文本控件input和textarea时，有时想禁止对其中某些特殊文本进行编辑，比如需要由程序生成的某些自定义特殊标记[img src=...]等。可以通过文本控件的selection
复制链接

扫一扫