JS实现自适应高度表单文本框的方法


Posted in Javascript onFebruary 25, 2015

本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>JS实现自适应高度的表单文本框</title>

    <style type="text/css">

        #shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; }

        #shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; }

        #text { resize: none; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var text = document.getElementById("text"); //用户看到的文本框

            var shadow = document.getElementById("shadow"); //隐藏的文本框

            text.oninput = //非IE的

            text.onpropertychange = //IE的

            onchange;

            

            function onchange() {

                shadow.value = text.value;

                setHeight();

                setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入

                function setHeight() { text.style.height = shadow.scrollHeight + "px"; }

            }

        };

    </script>

</head>

<body>

    <textarea id="text"></textarea>

    <textarea id="shadow"></textarea>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
Angular.JS中的this指向详解
May 17 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
如何编写高质量JS代码(续)
Feb 25 #Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 #Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 #Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 #Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 #Javascript
JS给超链接加确认对话框的方法
Feb 24 #Javascript
javascript实现图片循环渐显播放的方法
Feb 24 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
javascript实现动态标签云
2015/10/16 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Express的路由详解
2015/12/10 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
解析python实现Lasso回归
2019/09/11 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
Python中if有多个条件处理方法
2020/02/26 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
高中生毕业自我鉴定
2013/10/10 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
综合内勤岗位职责
2014/04/14 职场文书
2015年财务部工作总结
2015/04/10 职场文书
中学社团活动总结
2015/05/07 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers