Javascript 将多个项目添加到包含重复项目的文本区域

将多个项目添加到包含重复项目的文本区域

我有一个文本区域，用于在单击“添加数据链接”后存储数据

如何防止向文本区域添加重复项

JavaScript调用DOM事件：

  var Dom = {
    get: function(el) {
      if (typeof el === 'string') {
        return document.getElementById(el);
      } else {
        return el;
      }
    },
    add: function(el, dest) {
      var el = this.get(el);
      var dest = this.get(dest);
      dest.appendChild(el);
    },
    remove: function(el) {
      var el = this.get(el);
      el.parentNode.removeChild(el);
    }
  };

  var Event = {
    add: function() {
      if (window.addEventListener) {
        return function(el, type, fn) {
          Dom.get(el).addEventListener(type, fn, false);
        };
      } else if (window.attachEvent) {
        return function(el, type, fn) {
          var f = function() {
            fn.call(Dom.get(el), window.event);
          };
          Dom.get(el).attachEvent('on' + type, f);
        };
      }
    }()
  };

JQuery将数据添加到文本区域：

    $("#lkaddlanguage").click(function(){


                 var totalstring;
                 var checkconstring = $("#contentlng").text();

                 var strLen = checkconstring.length;
                 myStr = checkconstring.slice(0,strLen-1);
                 //alert(myStr);

                 var checkedItemsArray = myStr.split(";");
                 var j = 0;
                 var checkdup=0;

                totalstring=escape($("#textval").val()) ;

                var i = 0;

                var el = document.createElement('b');
                el.innerHTML = totalstring +";";

                Dom.add(el, 'txtdisplayval');

                Event.add(el, 'click', function(e) {
                  Dom.remove(this);
                });

    });

HTML显示数据

<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a>
<textarea readonly id="txtdisplayval" ></textarea>

---

对我来说，这似乎是一个非常简单的要求，所以我不太清楚你在哪里被卡住了。考虑到您引用的是html内容中未显示的元素，我还没有尽力找出您现有的代码。此外，将自己的DOM代码与jQuery混合似乎有点毫无意义。您根本不需要jQuery，但是既然选择了包含它，为什么不使用它呢

无论如何，下面的短函数将使用JS对象保留当前项的列表，并根据该列表检查每个新项。双击项目将删除它。我已将其放入文档中，但您可以根据需要进行管理：

<script>
$(document).ready(function() {
   var items = {};

   $("#lkaddlanguage").click(function(){
       var currentItem = $("#textval").val();

       if (currentItem === "") {
           alert("Please enter a value.");
       } else if (items[currentItem]) {
           alert("Value already exists.");
       } else {
           items[currentItem] = true;
           $("#txtdisplayval").append("<span>" + currentItem + "; </span>");
       }

       // optionally set up for entry of next value:
       $("#textval").val("").focus();
       return false;
   });

   $("#txtdisplayval").on("dblclick", "span", function() {
       delete items[this.innerHTML.split(";")[0]];
       $(this).remove();
   });
});
</script>

<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a><br>
<div id="txtdisplayval" ></div>

<style>
 #txtdisplayval {
    margin-top: 5px;
    width  : 200px;
    height : 100px;
     overflow-y : auto;
    border : 1px solid black;
 }
</style>

注意，我使用的div样式有一个边框，允许垂直滚动，而不是文本区域

正如您所看到的，我将其编码为显示重复项或空项的警报，但显然您可以删除该警报，忽略重复项或替换您自己的错误处理。另外，我认为清除输入字段并将焦点设置回它以便输入下一个值可能很方便，但当然也可以删除它

工作演示：

我很困惑

唯一可能有重复项的变量来自：

var checkedItemsArray=myStr.split

但是，checkedItemsArray不用于任何用途

顺便说一句，该方法被弃用，取而代之的是

当设置textarea的值时，只需这样做：分配给它的value属性，而不是它的innerHTML。它里面不能有标记或任何元素，只有文本节点

如果要检查checkedItemsArray的成员是否唯一，并且不介意对其进行排序，可以使用以下简单函数：

function unique(arr) {
  arr.sort();
  var i = arr.length;

  while (i--) {
    if (arr[i] == arr[i - 1]) {
       arr.splice(i, 1);
    }
  }
  return arr;
}

---

可以维护原始顺序，但代码要多一点。

如果有jQuery可用，为什么要使用这个自编的DOM类？！我之所以使用DOM，是因为当dobule单击textarea上的项目时，它将被删除。但是jQuery可以处理双击。完全不使用jQuery没有什么错，但是包含它，然后不使用它来做它能做的事情没有多大意义。同样重要的是，如果OP有一个小的库来做所有必要的事情，为什么要使用jQuery呢？因为他确实使用jQuery-请参阅他的第二个代码块的第一行。