Question

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

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

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

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将数据添加到textarea：

    $("#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>

Answer 1

这对我来说似乎是一个非常直接的要求，所以我不太清楚你被困在哪里。鉴于您引用的是未在html中显示的元素（“contentlng”），我没有太努力弄清楚您现有的代码。此外，将您自己的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（设计为具有边框并允许垂直滚动）而不是textarea。

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

工作演示：http://jsfiddle.net/LTsBR/1/

Answer 2

我很困惑。

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

var checkedItemsArray = myStr.split（“;”）;

但是， checkedItemsArray 不会用于任何事情。

顺便说一下，escape方法已弃用，而不是encodeURIComopnent。

设置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;
}

可以维持原始订单，但是代码更多。

将多个项目添加到具有重复项目的文本区域

2 个答案: