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

Posted 2022-12-04 lfq761204

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了禁止对文本框内指定字符（部分内容）进行修改相关的知识，希望对你有一定的参考价值。

一、前言

在使用文本控件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>

以上是关于禁止对文本框内指定字符（部分内容）进行修改的主要内容，如果未能解决你的问题，请参考以下文章