如何使用现代浏览器（具有 shadowDOM 内部编辑器）清除输入元素？

Question

  document.getElementById('taginput').addEventListener('paste',function(e){
    var clipboardData, pastedData, inputdata, tempData, tempTags = [], currentTags = [], out = '';
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    inpudata = document.getElementById('taginput').value + pastedData;
    tempData = pastedData.split(',');
    for (var i = 0; i < tempData.length - 1; i++) {
      if(tempTags.indexOf(tempData[i].trim()) === -1) tempTags.push(tempData[i].trim());
    }
    Array.prototype.slice.call(document.getElementsByTagName('dynamictags')[0].children).forEach(function(data){
      currentTags.push(data.innerText);
    });
    tempTags.forEach(function(data){
      if (currentTags.indexOf(data) === -1) out += '<res>' + data + '</res>';
    });
    document.getElementsByTagName('dynamictags')[0].innerHTML = document.getElementsByTagName('dynamictags')[0].innerHTML + out;
    this.value = '';
    this.value = tempData[tempData.length - 1].trim();
  }, false);

这是我当前的代码，此实现的问题是 this.value = '' 不会重置输入字段，并且 this.value = tempData[tempData.length - 1].trim(); }, false); 会在输入字段中的用户输入之前简单地添加新文本。

例如，如果我将 apple, apple , orange, banana 粘贴到该字段中，它将保留并添加香蕉并变为 banana apple, apple , orange, banana。

Answer 1

对于 shadow-DOM 浏览器你需要这个：

setTimeout(function(){
  document.getElementById('taginput').value = tempData[tempData.length - 1].trim();
},0);

如何使用现代浏览器（具有 shadowDOM 内部编辑器）清除输入元素？

How to clear an input element with modern browser (that has shadowDOM inner-editor)?

javascript

shadow-dom