將多個項目添加到包含重複項目的文本區域

我有一個文本區存儲數據點擊添加數據鏈接後。

如何防止添加重複的項目文本區域？

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>

來源

2012-01-03 Jam Sva

爲什麼使用這個自寫的DOM類，如果你有jQuery可用？ – ThiefMaster 2012-01-03 01:25:47

我使用DOM的原因因爲當dobule點擊textarea上的項目時，它將被刪除。 – 2012-01-03 01:30:15

但jQuery可以處理雙擊。根本不使用jQuery沒什麼問題，但包含它並沒有什麼意義，然後也沒有將它用於它可以做的事情。 – nnnnnn 2012-01-03 01:51:10

這似乎是一個非常簡單的要求我，所以我你不太清楚你卡在哪裏。由於您引用的元素未顯示在您的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（風格有一個邊界，並允許垂直滾動），而不是一個文本。你可以看到我已經編碼它顯示重複或空項目的警報，但顯然你可以刪除它，只是忽略重複項（或替代你自己的錯誤處理）。此外，我認爲清除輸入字段並將焦點重新設置爲輸入下一個值可能會很方便，當然，您也可以刪除它。

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

來源

2012-01-03 02:13:11 nnnnnn

謝謝你的工作。 – 2012-01-03 02:59:13

我很困惑。

可能有重複的唯一變量是來自：

變種checkedItemsArray = myStr.split（「;」）;

但是，checkedItemsArray不用於任何事情。

順便說一下，escape方法已棄用，有利於encodeURIComopnent。

當設置textarea的值時，做到這一點：分配給它的值屬性，而不是它的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; 
}

一部開拓創新的順序可以維持，但是它有更多的代碼。

來源

2012-01-03 02:30:23 RobG

將多個項目添加到包含重複項目的文本區域

回答

相關問題