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功能 一文

Ajax框架介绍   虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据,但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦,开发人员需要学习新的技巧及如何最好利用这些新技术。   AJAX模式   许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其中许多元素已经在Web服务中包含了,就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟还会有许多地方需要改进,特别是UI部分的易用性。   AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML,浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合,因此必须理解如何才能最好的使用这些技术。   综合各种变化的技术和强耦合的客户服务端环境,AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构,这限制了应用层次之间的边界。同时,开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是,AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。
Ajax框架介绍   虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据,但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦,开发人员需要学习新的技巧及如何最好利用这些新技术。   AJAX模式   许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其中许多元素已经在Web服务中包含了,就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟还会有许多地方需要改进,特别是UI部分的易用性。   AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML,浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合,因此必须理解如何才能最好的使用这些技术。   综合各种变化的技术和强耦合的客户服务端环境,AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构,这限制了应用层次之间的边界。同时,开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是,AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fswy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值