Javascript HTML文本编辑器div-强制文本从底部开始-从底部到顶部文本框

简而言之，我想要一个从下到上的文本框，它保持我定义的宽度和高度。在添加样式position:relative时，将光标保持在左下角是有效的，这使div在添加文本时自动增长。使用“位置：绝对”时，光标将更改为左上角

如何重现问题：

打开JSFIDLE并将右下角的更多文本写入文本框，直到文本框溢出。目标是保持div的大小，但同时保持插入符号在左下角

为了创建一个漂亮的文本框，我不得不使用div“contenteditable=true”。这个div是由服务器“swellrt”创建的，我可以添加属性和样式，但是我不能更改文本是否进入这个div

这是一个协作文本编辑器，其中服务器负责所有用户的所有文本所在的div，并从同一div的用户处进行编辑，使用实时webrtc频道发布和获取所有更改。在客户端，我只能更改由服务器控制的div的样式和样式

插入符号或光标应基本上开始，并且（只要用户不移动）停留在文档的底部

我可以用下面的例子来实现这一点，但是使用position:relative，div在溢出时会增加高度（当我们输入大量文本时）。但当将位置更改为绝对时，插入符号将再次从左上角开始

---

移除显示：表格单元格；然后你就可以得到溢出-y。您的div也将是固定高度的。如果你想让你的文本从底部开始，只需在一个子div中添加所有属性，然后转换为-100%

如果我理解正确，你想让插入符号从底部开始？这里有一个答案：它可能会回答你所寻找的。它使用javascript设置元素中插入符号的位置。您可以确定文本的长度，只需将插入符号设置为结尾。代码如下：

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

---

通过使用position:relative，插入符号可以知道画布的“底部”在哪里。如果您在画布类中使用position:absolute，这意味着您是“此画布的主人”，但当然，您也必须自己设置所有值。随后，这意味着您的插入符号不会自动知道底部在哪里。 无论如何，您可以添加一个额外的“插入符号”类，并为该类提供定位自身所需的信息

在CSS中尝试以下操作：

    .canvas {

    background-color:   #fff;
    box-shadow:         0 4px 14px -4px #919191;
    border:             1px solid #e0e0e0;
    height: 300px;
    width:  500px;
    margin: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    word-wrap:break-word; 
    vertical-align: bottom;
    display: table-cell;
    word-wrap:break-word; 
    overflow: scroll; 

    vertical-align: bottom;
    display: table-cell;

    position:absolute;
}
.caret {
  margin-top: 250px;
  position: relative;
}

在您的HTML中：

<div contenteditable=true class="canvas">
  <div contenteditable=true class="caret">
  testtext
  </div>
</div>

测试文本

---

干杯

感谢您的快速回复，但我无法添加其他元素，文本来自服务器“swellrt”并进入此分区。您知道如何在不更改服务器代码的情况下处理此问题吗？如果您使用Vue和axios获取数据，您可以使用您的分区对其进行建模。没有任何前端框架，这很难做到。谢谢，我可以添加任何我喜欢的框架，我会尝试一下。此外，我还修改了我的问题，添加了尚未提及的div.uff要求。我只是查看了vue和axios，它们没有帮助，因为这需要重写Swelrt服务器的客户端部分。我想，按照您的建议，重写客户端部分以添加另一个div要比更改基于webrtc的实时连接容易得多……您在前端使用哪种javascript框架这是一件好事，但不幸的是无法工作，因为用户可能会同时更改文本框中的文本。使用此解决方案，我将从用户控件中删除插入符号。您只希望它从底部开始，对吗？您可以在加载时执行此操作，或者如果满足特定条件，您不一定需要将其永久保留在那里。它更像是一个自下而上的文本框，因为有多个参与方插入文本和阅读文本（协作），只需将光标放在左下角，对空文本框就有帮助了。无论如何，非常感谢您投入您的智慧！

    .canvas {

    background-color:   #fff;
    box-shadow:         0 4px 14px -4px #919191;
    border:             1px solid #e0e0e0;
    height: 300px;
    width:  500px;
    margin: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    word-wrap:break-word; 
    vertical-align: bottom;
    display: table-cell;
    word-wrap:break-word; 
    overflow: scroll; 

    vertical-align: bottom;
    display: table-cell;

    position:absolute;
}
.caret {
  margin-top: 250px;
  position: relative;
}

<div contenteditable=true class="canvas">
  <div contenteditable=true class="caret">
  testtext
  </div>
</div>