Textarea 函数不适用于不是 textarea 的 contenteditable 元素答案

【问题标题】：Textarea functions don't work with contenteditable elements that are not textareasTextarea 函数不适用于不是 textarea 的 contenteditable 元素
【发布时间】：2018-09-16 14:59:46
【问题描述】：

我正在尝试使用此功能使滚动条保持向下（Tampermonkey，在网站上：'https://dictation.io/speech'）：

setInterval(function() {
   document.getElementsByClassName('ql-editor').scrollTop = document.getElementsByClassName('ql-editor').scrollHeight;
     }, 500);

它以前在另一个网站上工作过。

我已经固定了文本框的高度，所以当有足够的文本时会出现这个滚动条：

div.notepad {
  height : 771px;
}

我试过这样做：

setInterval(function() {
   document.getElementById("speech").scrollTop = document.getElementById("speech").scrollHeight;
     }, 500);

还有这个（让它只读，但它也不起作用）：

document.getElementById("speech").readOnly = true;
document.getElementsByClassName("ql-editor").readOnly = true;

我只是想让滚动条一直向下。我尝试了所有可能的 id 和类名。它在另一个网站上运行良好（文本框是这样的：<textarea class="-metrika-nokeys" name="docel" id="docel" style="width: 100%;" cols="80" rows="20" spellcheck="true"></textarea>）。但是对本网站的文本框没有任何影响。提前感谢您的帮助！

附：问题是普遍的。这段代码（当它是“.ql-editor”而不是“#speech”时）也不起作用：

var input = document.querySelector('#speech');
var textarea = document.querySelector('#speech');

var reset = function(e) {
    var context = this;

  setTimeout(function() {
    var len = context.value.length;
    context.setSelectionRange(len, len);
  }, 100);
};

input.addEventListener('copy', reset, false);
textarea.addEventListener('copy', reset, false);

【问题讨论】：

标签： textarea scrollbar scrolltop tampermonkey

【解决方案1】：

我能够通过创建一个 textarea、从 div 复制文本并将所有这些功能应用于该 textarea 来解决它（可能不是最佳解决方案）。代码如下：

创建一个文本区域：

var div = document.getElementById("speech");
var input = document.createElement("textarea");
input.setAttribute("id", "normaltext");
input.name = "post";
input.cols = "80";
input.rows = "2";
div.appendChild(input); //appendChild

将所有内容从 div 复制到 textarea：

setInterval(function copyText() {
    $("#normaltext").val($(".ql-editor").text());
}, 100);

应用函数：

var input1 = document.querySelector('#normaltext');
var textarea1 = document.querySelector('#normaltext');

var reset = function(e) {
    var context = this;

  setTimeout(function() {
    var len = context.value.length;
    context.setSelectionRange(len, len);
  }, 100);
};

input1.addEventListener('copy', reset, false);
textarea1.addEventListener('copy', reset, false);




setInterval(function() {
   document.getElementById("normaltext").scrollTop = document.getElementById("normaltext").scrollHeight;
     }, 500);

这对我有用，但也许有人会想出更好的解决方案。

【讨论】：