更改当前TextArea值而不指定新值？

Question

当我按“A”将字符添加到TextArea的值时，值如何变化？ 浏览器是否会执行以下操作：

texarea.value+="A";
//same as:
texarea.value=texarea.value+"A";

我想动态地更改该值并通知textarea关于更改而不指定新的值，因为我认为如果值需要大量内存，那么assingment不是很好。 有没有办法做到这一点？

Answer 1

好的，我解决了它：

乍一看，这个解决方案似乎也不是很有效，但它有一些很大的优点： 例如，您只能从服务器加载一个非常大的文件的特定部分，并在用户滚动页面时动态加载它。 您还可以更新文件表示的客户端版本（同步编辑）

＆＃13;

＆＃13;

document.registerElement('text-area', class NicePanel extends HTMLElement {
  createdCallback() {
    //this.root = this.createShadowRoot();
    this.tabIndex = 1;
    this.onkeydown = function(e) {
      this.monkeydown(e);
    }
    this.onkeypress = function(e) {
      this.monkeypress(e);
    }

    this.setValue(this.innerHTML);
  }
  setValue(value) {
    var mutablestring = Array.from(value);
    this.innerHTML = "";
    var l = mutablestring.length;
    for (var i = 0; i < l; i++) {
      if (mutablestring[i] == '\n') {
        var br = document.createElement('br');
        br.onclick = this.characterClick;
        this.appendChild(br);
      } else {
        var span = document.createElement('span');
        span.onclick = this.characterClick;
        span.innerHTML = mutablestring[i];
        this.appendChild(span);
      }
    }
    this.cursor = document.createElement('span');
    this.cursor.innerHTML = "|";
    this.appendChild(this.cursor);
  }
  getValue() {
    var value = "";
    var children = this.childNodes;
    var that = this;
    children.forEach(function(child) {
      if (child.nodeName == "BR") {
        value += "\n";
        return;
      }
      if (child === that.cursor) return;
      value += child.innerHTML;
    });

    return value;
  }

  attachedCallback() {}
  monkeydown(e) {
    var KeyID = event.keyCode;
    switch (KeyID) {
      case 8:
        this.cursor.parentNode.removeChild(this.cursor.previousSibling);

        e.preventDefault();
        break;
      case 46:
        this.cursor.parentNode.removeChild(this.cursor.nextSibling);
        e.preventDefault();
        break;

      case 13:
        var br = document.createElement('br');
        br.onclick = this.characterClick;
        this.cursor.before(br);
        e.preventDefault();
        break;
      case 37: //left
        this.cursor.parentNode.insertBefore(this.cursor, this.cursor.previousSibling);
        break;
      case 38: //up
        break;
      case 39: //right
        this.cursor.parentNode.insertBefore(this.cursor, this.cursor.nextSibling.nextSibling);
        break;
      case 40: //down
        break;
      default:
        break;
    }
  }
  characterClick(e) {
    this.parentNode.cursor.parentNode.insertBefore(this.parentNode.cursor, e.target);
  }
  monkeypress(e) {
    var span = document.createElement('span');
    span.onclick = this.characterClick;

    span.innerHTML = String.fromCharCode(e.which);
    this.cursor.parentNode.insertBefore(span, this.cursor);
  }
  monclick(e) {
    var target = e.target; // Clicked element
    while (target && target.parentNode !== this) {
      target = target.parentNode; // If the clicked element isn't a direct child
      if (!target) {
        return;
      } // If element doesn't exist
    }
    if (target.tagName === 'SPAN') {
      alert(target.id); // Check if the element is a LI
    }
  }
})
var myta = document.getElementById('myta');
myta.setValue("huhu\nlala");
console.log(myta.getValue());

＆＃13;

text-area {
  width: 100%;
  background: #fff;
  display: block;
}

＆＃13;

<text-area id="myta" class="text">Hello World

</text-area>

＆＃13;

＆＃13;

＆＃13;