javascript - 如何在文本区域或文本字段中将一些特殊的词设置为只读

Question

我有两个字段。文本区域和输入类型文本。其中有一些标签，如 <firstname>我想让这些用户无法编辑。如果他试图删除整个标签将被删除。这是 Js fiddle

我正在尝试这个

$(function () {
            var tb = $("#t").get(0);
            $("#t").keydown(function (event) {
                var start = tb.selectionStart;
                var end = tb.selectionEnd;
                var reg = new RegExp("(<.+?>)", "g");
                var amatch = null;
                while ((amatch = reg.exec(tb.value)) != null) {
                    var thisMatchStart = amatch.index;
                    var thisMatchEnd = amatch.index + amatch[0].length;
                    if (start <= thisMatchStart && end > thisMatchStart) {
                        event.preventDefault();
                        return false;
                    }
                    else if (start > thisMatchStart && start < thisMatchEnd) {
                        event.preventDefault();
                        return false;
                    }
                }
            });
        });

但它不起作用。

它仅适用于如果 cursur 位于标记的开头则它不可编辑。但是如果 cursur 在标签的末尾，那么这是可编辑的。我想让它完全不可编辑。

Answer 1

完成了。我只是将 +1 添加到开始和结束选择器。它有效。这是工作链接JSfiddle html代码是

<input type="text" class="tag-check" value="<tagname> this is just a check" >
<textarea id="t" class="tag-check" rows=5 cols="80">Hello this is a test <companyname> 

        <lastname> this part is editable <firstname>     

    </textarea>

js代码是

$(function () {


            $(".tag-check").keydown(function (event) {
                var tb = $(this).get(0);
                var start = tb.selectionStart;

                var end = tb.selectionEnd;
                var reg = new RegExp("(<.+?>)", "g");
                var amatch = null;
                while ((amatch = reg.exec(tb.value)) != null) {
                    var thisMatchStart = amatch.index-1;
                    var thisMatchEnd = amatch.index + amatch[0].length+1;
                    if (start <= thisMatchStart && end > thisMatchStart) {
                        event.preventDefault();
                        return false;
                    }
                    else if (start > thisMatchStart && start < thisMatchEnd) {
                        event.preventDefault();
                        return false;
                    }
                }
            });
        });