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 相关文章推荐
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
如何编写高质量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函数
2006/10/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
利用python求积分的实例
2019/07/03 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
初中学生期末评语
2014/04/24 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
售房协议书范本2014
2014/10/23 职场文书
水电工程师岗位职责
2015/02/13 职场文书
关于远足的感想
2015/08/10 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers