Kha*_*lid 1 html javascript css 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的底部
例:
.-----------------------------.
| |
| |
| |
| 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>
你实际上有2个选项,并且它们都不是"自然的",因为我们正在创造他们通常不会做的事情(但是,嘿,谁没有？)
第一个是内容可编辑<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;
}
另一种选择是将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);
}());?