Textarea根据内容自适应高度

直接看代码吧，很简单，也很实用。


代码如下:

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" style="height:25px;" id="text"></textarea>
</body>
</html>

赞 (0)

相关推荐

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • 基于jquery的让textarea自适应高度的插件

    Introduction 1. This textarea is like the google calendar's description when you create one new or update one existence calendar; 2. Its height will be changed accroding to user's input; 3. Its scrollbar is removed, which makes it much user friendly.

  • jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 复制代码 代码如下: jQuery.fn.extend({             autoHeight: function(){                 return this.each(function(){                     var $this = jQuery(this);                     if( !$th

  • Jquery实现textarea根据文本内容自适应高度

    在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. autoTextarea.js (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:

  • Textarea根据内容自适应高度

    直接看代码吧,很简单,也很实用. 复制代码 代码如下: <!DOCTYPE html><html><head><title>autoresizing textarea</title><style type="text/css">textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    ba

  • 文本框根据输入内容自适应高度的代码

    其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中. 源代码: 23:03文章更新: 感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器! 在线演示: http://demo.jb51.net/js/2011/autoArea/index.htmautoTextarea.js 复制代码 代

  • Vue中textarea自适应高度方案的实现

    目录 隐藏的问题 解决自适应高度的方案 先给方案,Vue栈有需求的同学可以直接下载vue-awesome-textarea 隐藏的问题 抛开原生JS,框架的大部分UI库都支持自适应textarea高度功能,但普遍都忽略了一个功能,就是自适应高度的回显. 使用这些库的时候,我们很容易的在textarea中键入内容,超出范围时会自动延展一行,保证内容高度的自适应.当我们提交内容,在其它页面使用同样的UI来渲染时,麻烦的就来了,有些UI库是不支持自适应回显的,这就需要我们通过行高.行数甚至高度之间的计

  • iframe自适应高度的多种方法方法小结

    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码 代码如下: function SetWinHeight(obj) { var win=obj; if (documen

  • div实现自适应高度的textarea实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的

  • jQuery简单实现iframe的高度根据页面内容自适应的方法

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

  • vue+elementUI 实现内容区域高度自适应的示例

    步骤很简单: 通过动态绑定属性给<el-main></el-main>绑定高度,而高度通过 innerHeight 获取,减去你的头部和底部高度,剩下的就是整个内容区域的高度了!话不多说,上代码 //defaultHeight是绑定的属性 <el-main :style="defaultHeight"> <router-view /> </el-main> //注意:这里的defaultHeight必须是对象,不懂的可以去官网

  • angularjs 页面自适应高度的方法

    angularjs 页面自适应高度的方法

    需求 在angularjs构建的业务系统中,通过ui-view路由实现页面跳转,初始化进入系统后,右侧内容区域需要自适应浏览器高度. 实现方案 在ui-view所在的Div添加directive,directive中通过element.css初始化计算div的高度,动态更新div高度 directive监听($$watch)angular的$digest,实时获取body高度,动态赋值model或element.css改变 方案1:添加directive和element.css自适应高度 1.创

随机推荐