我有
<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>
我想要的是,当我点击按钮时,文本进入文本区域并垂直对齐底部。意思是我添加的文本将附加到文本区域的底部
例子:
.-----------------------------.
| |
| |
| |
| this is some text |
'-----------------------------'
编辑:
我现在开始工作了
<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>
最佳答案
you actually have 2 options从某种意义上说,它们都不是“自然”的,因为我们正在创造通常它们不会做的事情(但嘿,谁不会呢?)
第一个是一个内容可编辑的<p>
标记,对齐后粘贴到容器的底部。我更喜欢这个,因为你的元素就像文本框一样。您可以选择并将光标放置在任何位置:
<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作为样式的占位符,并与隐藏的文本区域同步。这需要更多的逻辑来产生一个真正的文本框,但这只是一个概念:
<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);
}());