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

Question

简而言之，我想要一个从下到上的文本框，以保持我定义的宽度和高度。添加样式 position:relative 时保持光标左下角有效，这使得 div 在添加文本时自动增长。使用position:absolute时，光标变为左上角。

如何重现问题：

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

我不得不使用 div "contenteditable=true" 来创建一个漂亮的文本框。 div 由服务器 "swellrt" 创建，我可以添加属性和样式，但我无法更改文本进入此 div.

总体而言，它是关于协作文本编辑器的，其中服务器负责 div 所有用户的所有文本都在其中进行，并从同一个 [=44] 中获取用户的编辑=]，使用实时 webrtc 频道发布和获取所有更改。在客户端，我只能更改由服务器控制的 div 的样式和属性。

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

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

https://jsfiddle.net/pa0owso5/20/

<html>
<style>
.canvas {

    background-color:   #fff;
    box-shadow:         0 4px 14px -4px #919191;
    border:             1px solid #e0e0e0;
    height: 200px;
    width:  400px;
    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:relative;
}

</style>

<div contenteditable=true class="canvas">
text should start bottom left
</div>
</html>

我目前使用的关键 css 元素是：

vertical-align: bottom;
display: table-cell;
word-wrap:break-word; 
position:relative;

Answer 1

删除显示：table-cell；然后你可以有overflow-y。您的 div 也将根据您的喜好固定高度。如果你想让你的文本从底部开始，只需放一个 child div 给它所有的属性和 transformY 到 -100%

Answer 2

如果我没理解错的话，您希望插入符号从底部开始？这里有一个答案：Set keyboard caret position in html textbox 可能会回答您要查找的内容。它使用 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();
        }
    }
}

Answer 3

通过使用 position:relative，您的插入符号能够知道您的 canvas 的 "bottom" 在哪里。如果您在 canvas class 上使用 position:absolute，这意味着您是 "master of this canvas"，但当然您还必须自行设置所有值。这随后意味着您的插入符号不会自动知道底部在哪里。无论如何，您可以添加一个额外的 "caret" class 并为这个 class 提供它定位自己所需的信息。

尝试在 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>

干杯！

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

HTML Text editor div - force text to start from bottom - bottom to top textbox

html

javascript

css

wysiwyg