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