如何在文本区域或文本字段中使一些特殊单词为只读

Question

我有两个领域.Textarea和输入类型文本.在这些中有一些标签,比如<firstname>我想让这些用户无法使用.如果他试图删除整个标签将删除.这是Js小提琴

我正在尝试这个

$(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;
                    }
                }
            });
        });

但它不起作用.

它只适用于如果标记在标记的开头,那么它是不可编辑的.但是如果标签结束时,那么这是可编辑的.我想让它变得不可能.

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;
                    }
                }
            });
        });