javascript - 我可以在上面附加书面内容的框

我必须进行伪聊天，在将按钮按下到textarea上方的框后，它将在textarea中添加文本。到目前为止，我的代码看起来像这样

<form name="frm1" id="puts">
  <textarea name="txt1" COLS=15 ROWS=1></textarea>
  <a class="Sisesta Nupp" id="nupp5" href="#"
     onclick="alert(document.frm1.txt1.value) +(document.frm1.txt1.value='')"">
    <span>Sisesta </span>
  </a>

但是，如何将其写在文本区域上方的框中，以免擦除之前从上方框写的内容呢？以及如何绘制一个框，如果文本不再适合该框，该框将进行滚动显示？当我写东西时，它应该从列表中随机回答我。

edit1：由于html是废话，并且其他两个解决方案（都很好）在我的代码中不起作用，我想知道，如何将document.frm1.txt1.value附加在我的文本区域上方的框中？

最佳答案

好吧，我有几分钟的时间要杀死（等待IM响应），所以我使用了稍微修改的html来想到了这种可能性：

<div id="box">
    <ol id="chat"></ol>
</div>
<form action="#" method="post">
    <textarea id='text'></textarea>
    <input type='submit' value='send' id='button'>
</form>
<div id='result'></div>

和jQuery：

$('#button').click(
    function(){
        var text = $('#text').val();
        $('<li />')
            .text(text)
            .appendTo('#chat');
          $('#text').val('');
        return false;
    });

$('#text').keypress(
    function(e){
        if (e.keyCode == 13 && e.shiftKey == true){
           // might be a better way to do 'nothing'...
        }
        else if (e.keyCode == 13) {
            $('#button').click();
            return false;
        }
    });

JS Fiddle demo。


已编辑以链接到修订后的演示（针对“经典IM”外观）：JS Fiddle。