Web学习之文本框的三种实现方式

1、单行文本框：

<input type="text" style="height:20px;width:100px;" />

2、多行文本框（文本域）：

<textarea style="width:300px;height:100px;"></textarea>

textarea 标签

       代表HTML表单多行输入域

       textarea标签是成对出现的,以<textarea>开始,以</textarea>结束

属性

common	公共属性
accesskey	表单的快捷键访问方式
cols	多行输入域的列数
disabled	输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
name	元素名称
readonly	输入域可以选择，但是无法修改
rows	多行输入域的行数
tabindex	输入域的”tab”键遍历顺序

       更多属性详情可见：http://www.dreamdu.com/xhtml/tag_textarea/

3、<div> 标签实现多行文本栏

<textarea id="test1" style="width:300px; height: 200px;border: 1px #ccc solid; resize:none;"></textarea>

<div id="test2" style="width:300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;"></div>

<input type="button" value="Start" onclick="start();">
<input type="button" value="Stop" onclick="stop();">

var count = 1000;

function start(){
    $("#test1").html('');
    $("#test2").html('');
    timeBox = setInterval(function(){
        $("#test1").append('number:['+count+']--->I Love You\n')
        var scrollTop = $("#test1")[0].scrollHeight;
        $("#test1").scrollTop(scrollTop);
        $("#test2").append('number:['+count+']--->I Love You<br/>')
        $("#test2").scrollTop($("#test2")[0].scrollHeight);
        count--;
        if(count == 0){
            clearInterval(timeBox);
            count = 1000;
        }
    },1000);
}

function stop(){
    count = 1000;
    clearInterval(timeBox);
}

       另外可以参考：可编辑div的使用，实现类似textarea功能 一文