Textarea函数不适用于不是textareas的contenteditable元素

时间:2018-09-16 14:59:46

标签: textarea scrollbar scrolltop tampermonkey

我正在尝试使滚动条保持此功能不变(Tampermonkey,在网站上:“ https://dictation.io/speech”):

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

以前在其他网站上可以使用。

我已经固定了文本框的高度,所以当有足够的文本时会出现此滚动条:

div.notepad {
  height : 771px;
}

the image of the website

我尝试这样做:

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>)。但是,此网站上的文本框没有任何影响。 谢谢您提前提供帮助!

P.S。这个问题是普遍的。此代码(当它是“ .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);

1 个答案:

答案 0 :(得分:0)

我能够通过创建文本区域,从div复制文本并将所有这些功能应用于该文本区域来解决(可能不是最佳解决方案)。 这是代码:

创建文本区域:

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复制到文本区域:

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);

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