vertical-align textarea中的文本 [英] vertical-align text within a textarea
问题描述
我有
<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>
我想要的是当我点击按钮文本在textarea里面，对齐的底部。我添加的文本将附加到textarea的底部
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
示例：
.-----------------------------.
| |
| |
| |
| 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>
推荐答案
你实际上有2个选项，并且它们都不是自然的，在某种意义上，我们正在创造通常他们不做的事情（但嘿， t？）
you actually have 2 options and 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?)
第一个是内容可编辑的< p> 一个容器< div> 。我喜欢这一个，因为你只是有像文本框的元素。您可以选择并将光标放在任何地方：
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:
<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;
}
另一种选择是使用div作为样式的占位符，一个隐藏的文本区域与它同步。这需要更多的逻辑来实现真正的文本框，但这只是一个概念：
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 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);
}());
这篇关于vertical-align textarea中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
