Question

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

如何重现问题：

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

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

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

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

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

<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

删除display：table-cell;然后你就可以溢出了。您的div也可以根据需要固定高度。如果你想让你的文字从底部开始，只需将一个子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类上使用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>

干杯！

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

3 个答案: