javascript 在 textarea 中垂直对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9903057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical-align text within a textarea
提问by Khalid
I have
我有
<html>
<textarea id='txt' style='height:500px; widht:400px'></textarea>
<input type='text' id='input'/>
<input type='button' id='clicMe' onkeypress='fillTxt()' />
<script>
function fillTxt(){
if(event.keyCode == 13)
document.getElementById('txt').value += document.getElementById('input').value + <br/>;
}
</script>
</html>
what I want is that the when I click on the button the text gets inside the textarea and be vertically aligned bottom. Meaning the text I add will append to the bottom of the textarea
我想要的是，当我单击按钮时，文本会进入 textarea 并在底部垂直对齐。这意味着我添加的文本将附加到 textarea 的底部
Example:
例子：
.-----------------------------.
| |
| |
| |
| this is some text |
'-----------------------------'
EDIT:
编辑：
I got it working now
我现在开始工作了
<div id="tBox" style="
position:absolute;
top:400px;
left:220px;
width:600px;
height:334px;
color:#666666;
padding:5px;
margin-bottom:25px;">
<div id="tHolder" style="
width:500px;
height:300px;
background-color:transparent;
color:#008080;
font-weight:bold;
border-style:hidden;
left:5px;
background-color:transparent;
position:relative;
overflow:auto;">
<p id="txt" style='position:absolute; bottom:0; left:0;'></p>
</div>
<input type="text" style="width:500px; position:absolute; bottom:15px; left:8px;" id="input" name="input" onkeydown="fillTxt()" />
</div>
回答by Joseph
you actually have 2 optionsand both of them are not "natural" in a sense that we are creating things that normally they don't do (but hey, who doesn't?)
你实际上有 2 个选择，它们都不是“自然的”，因为我们正在创造他们通常不做的事情（但是嘿，谁不做？）
the first one is a content editable <p>tag aligned to stick to the bottom of a container <div>. i prefer this one since you just have elements that act like textboxes. you have select and the ability to land the cursor anywhere:
第一个是内容可编辑<p>标签，对齐以贴在容器底部<div>。我更喜欢这个，因为你只有像文本框一样的元素。您可以选择并能够将光标置于任何地方：
<div id="contentEditableDiv">
<p id="editableP" contentEditable="true"></p>
</div>
#contentEditableDiv{
width:300px;
height:200px;
margin:100px auto;
border: 1px solid #000;
background:#EEE;
position:relative;
overflow:auto;
}
#editableP{
background:red;
min-height:10px;
position:absolute;
bottom:0;
left:0;
right:0;
}
another option is to have a div as a placeholder for the style, and have a hidden textarea sync with it. this needs a bit more logic to immitate a true textbox but this is just the concept:
另一种选择是将 div 作为样式的占位符，并与它同步隐藏的 textarea。这需要更多的逻辑来模仿真正的文本框，但这只是概念：
<div id="textArea">
<span id="textHolder"></span>
</div>
<textarea id="hiddenTextArea"></textarea>?
#textArea{
width:300px;
height:200px;
margin:100px auto;
border: 1px solid #000;
background:#EEE;
position:relative;
overflow:auto;
}
#hiddenTextArea{
/*position:absolute;
width:0;
height:0;*/
}
#textHolder{
position:absolute;
bottom:0;
left:0;
}
?
window.onload = (function(){
var textArea = document.getElementById('textArea');
var hiddenTextArea = document.getElementById('hiddenTextArea');
var textHolder = document.getElementById('textHolder');
textArea.addEventListener('click',function(){
hiddenTextArea.focus();
},false);
hiddenTextArea.addEventListener('keyup',function(e){
textHolder.innerHTML = hiddenTextArea.value;
},false);
}());?
回答by Neil Hillman
Not sure this is possible, (to enter text at the bottom of the textarea).
不确定这是否可行，（在 textarea 底部输入文本）。
Your best bet might be to define the number of rows in the textarea, (say height: 5em; line-height: 1em;), and then use javascript to add 4 linefeeds before your input text.
最好的办法可能是定义 textarea 中的行数（比如 height: 5em; line-height: 1em;），然后使用 javascript 在输入文本之前添加 4 个换行符。
That or just have the textbox 1 row high, and pad it on the top to make it look like there are empty rows above.
或者只是将文本框高 1 行，并将其填充在顶部以使其看起来上面有空行。
回答by Epuri
This is something not possible through CSS. You might need JS code to determine height of textarea and add padding accordingly.
这是通过 CSS 无法实现的。您可能需要 JS 代码来确定 textarea 的高度并相应地添加填充。
回答by evotopid
Eventually you could add a text field in a div and set the distance between in the div and top of the textarea, and the bottom of the div and the bottom of the textarea.
最后，您可以在 div 中添加一个文本字段，并设置 div 和 textarea 顶部之间的距离，以及 div 底部和 textarea 底部之间的距离。
Somehow you could auto hight the textarea, then it should work.
不知何故，您可以自动调整文本区域，然后它应该可以工作。
回答by Rohit Azad
Hi i thing you should give padding to textarea as like this
嗨，你应该像这样给 textarea 填充
textarea{
width:400px;
height:400px;
padding-top:100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
