HTML文本编辑器div-强制文本从底部-底部到顶部文本框开始
[英]HTML Text editor div - force text to start from bottom - bottom to top textbox
问题描述
简而言之，我希望文本框从下到上保持我定义的宽度和高度。 在添加样式position：relative时，将光标保持在左下角可以使div在添加文本时自动增长。 当使用position：absolute时，光标变为左上角。
如何重现该问题：
打开jsfiddle并将更多右下的文本写到文本框中，直到溢出为止。 目标是保持div的大小，但同时保持插入符号的左下角
为了创建一个漂亮的文本框，我不得不使用div“ contenteditable = true”。 div是由服务器“ swellrt”创建的，我可以添加属性和样式，但是我无法更改文本即将进入该div。
此图的大背景是关于协作文本编辑器的，其中服务器负责所有用户正在处理的所有div的div，并从同一个div的用户那里进行编辑，并使用实时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;
3 个解决方案
解决方案1
1 2018-03-17 21:17:28
删除显示：表格单元； 然后，您可能会溢出-y。 您的div也可以根据需要设置为固定高度。 而且，如果您希望文本从底部开始，只需放置一个子div，为其提供所有属性，并将transformY设置为-100％
解决方案2
1 2018-03-30 21:05:23
如果我正确理解，您希望插入符号从底部开始？ 这里有一个答案： 在html文本框中设置键盘插入符的位置，这可能会回答您要查找的内容。 它使用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();
}
}
}
解决方案3
1 已采纳 2018-03-30 22:16:16
使用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>
干杯!
如何排列文本从 div 的底部开始？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.