精华内容
下载资源
问答
  • 文本框根据输入内容自适应高度h2 {text-align: center;margin: 50px auto;}#textarea {display: block;margin: 0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding: 2px...
    文本框根据输入内容自适应高度

    h2 {

    text-align: center;

    margin: 50px auto;

    }

    #textarea {

    display: block;

    margin: 0 auto;

    overflow: hidden;

    width: 550px;

    font-size: 14px;

    height: 18px;

    line-height: 24px;

    padding: 2px;

    border-radius: 4px;

    min-height: 20px;

    max-height: 70px;

    }

    textarea {

    outline: 0 none;

    border-color: rgba(82, 168, 236, 0.8);

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

    }

    /**          * 文本框根据输入内容自适应高度

    * @param                {HTMLElement}        输入框元素

    * @param                {Number}                设置光标与输入框保持的距离(默认0)

    * @param                {Number}                设置最大高度(可选)

    */

    var autoTextarea = function (elem, extra, maxHeight) {

    extra = extra || 0;

    var isFirefox = !!document.getBoxObjectFor || ‘mozInnerScreenX‘ in window,

    isOpera = !!window.opera && !!window.opera.toString().indexOf(‘Opera‘),

    addEvent = function (type, callback) {

    elem.addEventListener ?

    elem.addEventListener(type, callback, false) :

    elem.attachEvent(‘on‘ + type, callback);

    },

    getStyle = elem.currentStyle ? function (name) {

    var val = elem.currentStyle[name];

    if (name === ‘height‘ && val.search(/px/i) !== 1) {

    var rect = elem.getBoundingClientRect();

    return rect.bottom - rect.top -

    parseFloat(getStyle(‘paddingTop‘)) -

    parseFloat(getStyle(‘paddingBottom‘)) + ‘px‘;

    };

    return val;

    } : function (name) {

    return getComputedStyle(elem, null)[name];

    },

    minHeight = parseFloat(getStyle(‘height‘));

    elem.style.resize = ‘none‘;

    var change = function () {

    var scrollTop, height,

    padding = 0,

    style = elem.style;

    if (elem._length === elem.value.length) return;

    elem._length = elem.value.length;

    if (!isFirefox && !isOpera) {

    padding = parseInt(getStyle(‘paddingTop‘)) + parseInt(getStyle(‘paddingBottom‘));

    };

    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    elem.style.height = minHeight + ‘px‘;

    if (elem.scrollHeight > minHeight) {

    if (maxHeight && elem.scrollHeight > maxHeight) {

    height = maxHeight - padding;

    style.overflowY = ‘auto‘;

    } else {

    height = elem.scrollHeight - padding;

    style.overflowY = ‘hidden‘;

    };

    style.height = height + extra + ‘px‘;

    scrollTop += parseInt(style.height) - elem.currHeight;

    document.body.scrollTop = scrollTop;

    document.documentElement.scrollTop = scrollTop;

    elem.currHeight = parseInt(style.height);

    };

    };

    addEvent(‘propertychange‘, change);

    addEvent(‘input‘, change);

    addEvent(‘focus‘, change);

    change();

    };

    文本框根据输入内容自适应高度

    var text = document.getElementById("textarea");

    autoTextarea(text);// 调用

    原文:http://www.cnblogs.com/tsyr/p/4834369.html

    展开全文
  • 文本框根据输入内容自适应高度h2 {text-align: center;margin: 50px auto;}#textarea {display: block;margin: 0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding: 2px...
    文本框根据输入内容自适应高度

    h2 {

    text-align: center;

    margin: 50px auto;

    }

    #textarea {

    display: block;

    margin: 0 auto;

    overflow: hidden;

    width: 550px;

    font-size: 14px;

    height: 18px;

    line-height: 24px;

    padding: 2px;

    }

    textarea {

    outline: 0 none;

    border-color: rgba(82, 168, 236, 0.8);

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

    }

    /***

    * 文本框根据输入内容自适应高度

    * @param {HTMLElement} 输入框元素

    * @param {Number} 设置光标与输入框保持的距离(默认0)

    * @param {Number} 设置最大高度(可选)

    */

    var autoTextarea = function(elem, extra, maxHeight) {

    extra = extra || 0;

    var isFirefox = !!document.getBoxObjectFor || ‘mozInnerScreenX‘ in window,

    isOpera = !!window.opera && !!window.opera.toString().indexOf(‘Opera‘),

    addEvent = function(type, callback) {

    elem.addEventListener ?

    elem.addEventListener(type, callback, false) :

    elem.attachEvent(‘on‘ + type, callback);

    },

    getStyle = elem.currentStyle ? function(name) {

    var val = elem.currentStyle[name];

    if (name === ‘height‘ && val.search(/px/i) !== 1) {

    var rect = elem.getBoundingClientRect();

    return rect.bottom - rect.top -

    parseFloat(getStyle(‘paddingTop‘)) -

    parseFloat(getStyle(‘paddingBottom‘)) + ‘px‘;

    };

    return val;

    } : function(name) {

    return getComputedStyle(elem, null)[name];

    },

    minHeight = parseFloat(getStyle(‘height‘));

    elem.style.resize = ‘none‘;

    var change = function() {

    var scrollTop, height,

    padding = 0,

    style = elem.style;

    if (elem._length === elem.value.length) return;

    elem._length = elem.value.length;

    if (!isFirefox && !isOpera) {

    padding = parseInt(getStyle(‘paddingTop‘)) + parseInt(getStyle(‘paddingBottom‘));

    };

    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    elem.style.height = minHeight + ‘px‘;

    if (elem.scrollHeight > minHeight) {

    if (maxHeight && elem.scrollHeight > maxHeight) {

    height = maxHeight - padding;

    style.overflowY = ‘auto‘;

    } else {

    height = elem.scrollHeight - padding;

    style.overflowY = ‘hidden‘;

    };

    style.height = height + extra + ‘px‘;

    scrollTop += parseInt(style.height) - elem.currHeight;

    document.body.scrollTop = scrollTop;

    document.documentElement.scrollTop = scrollTop;

    elem.currHeight = parseInt(style.height);

    };

    };

    addEvent(‘propertychange‘, change);

    addEvent(‘input‘, change);

    addEvent(‘focus‘, change);

    change();

    };

    文本框根据输入内容自适应高度

    var text = document.getElementById("textarea");

    autoTextarea(text); // 调用

    20190810154242051550.png

    原文:https://www.cnblogs.com/zhouguoshuai/p/11331490.html

    展开全文
  • html: <textarea id="textarea" placeholder="留言建议提前协商(50字以内"> </textarea> js: // textarea自适应高度 function makeExpandingArea(el) { var timer = null; ...

    输入文本前:

    输入文本后(自适应):

     

    实现:

    html:

    <textarea id="textarea" placeholder="留言建议提前协商(50字以内"> </textarea>
    

    js:

    // textarea自适应高度
    function makeExpandingArea(el) {
        var timer = null;
        var setStyle = function(el, auto) {
            if (auto) el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
        }
        var delayedResize = function(el) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            timer = setTimeout(function() {
                setStyle(el)
            }, 200);
        }
        if (el.addEventListener) {
            el.addEventListener('input', function() {
                setStyle(el, 1);
            }, false);
            setStyle(el)
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', function() {
                setStyle(el)
            })
            setStyle(el)
        }
        if (window.VBArray && window.addEventListener) { //IE9
            el.attachEvent("onkeydown", function() {
                var key = window.event.keyCode;
                if (key == 8 || key == 46) delayedResize(el);
    
            });
            el.attachEvent("oncut", function() {
                delayedResize(el);
            }); //处理粘贴
        }
    }
    
    var textarea = document.getElementById('textarea');
    makeExpandingArea(textarea);

     

     

     

     

    展开全文
  • 代码如下: <div class="wrapper animated fadeInRight"> <form id="form" class="form-horizontal m"> <div class="form-group"> ...textarea cols="136" rows="12" id="textMsg" col=...

    代码如下:

    <div class="wrapper animated fadeInRight">
        <form id="form" class="form-horizontal m">
            <div class="form-group">
                <textarea cols="136" rows="12" id="textMsg" col="CanelReason"
                style="resize: none;width: 100%;overflow: auto;word-break: break-all;"></textarea>
            </div>
        </form>
    </div>
    

    效果如下图所示:

    没图啦,总之行!!!!!!!

    展开全文
  • 下面展示的为实现自适应输入框的部分关键代码 [图片上传中...(image-89a2f0-1569465337493-0)] 初始化cell - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)...
  • 实际应用中,可能需要input文本框能够根据输入字符的所占据的宽度自动调节尺寸。直接计算输入字符所占据的宽度,就如同直接称量大象体重一样比较困难。可以和当年曹冲一样转换思路,达到殊途同归的效果。下面分享一...
  • HTML文本框自适应文本内容的高度、、、代码包中隐藏了边框
  • 本文实例讲述了js实现文本框宽度自适应文本宽度的方法。分享给大家供大家参考。具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话...
  • 只要给div设置 contenteditable="true" ,div就可像input文本框一样获取到光标啦,代码如下: html: css:  div{ width:90%; border:1px solid #EBEBEB; min-height:24px; background-color:#FFF; ...
  • 文本框高度自适应

    2012-04-27 10:43:00
    &...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="...
  • DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <textarea onpropertychange="this.style.height=this....
  • 需求:做一个文本框需要让文本框有一个默认的最小高度,当书写的文字到文本框的最底端的时候可以让文本框自动撑开。 第一种方法通过js来实现的: html部分:<textarea name="" class="disvertop describe-texa...
  • 效果图:          关键代码:        contentEditable:  ... 是html中的一个属性。设置html的contentEditable=‘true’时,即可开启该元素的编辑模式    代码如下: String
  • 本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8...
  • 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
  • DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><script type="text/ja...
  • 本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下:JS实现自适应高度的表单文本框#shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px...
  • <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...文本框根据输入内容自...
  • 项目中需要用到textarea ,而且高度要随输入的内容自适应,网上查了很多资料,发现有两种解决的办法很好用,就摘录下来,方便以后的学习和运用 方法一:使用原声js demo演示地址:...
  • BFC布局详解,模块垂直居中详解:https://www.cnblogs.com/hz1124/p/6131795.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example </title...
  • 本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html这个写法是用原生JS写的,考虑了很多兼容性问题,完全和新浪微博的回复效果一样的功能。有兴趣的童鞋可以仔细分析下代码。&lt;!DOCTYPE...
  • css:div实现textarea文本框那种可以自适应文字高度的 说明: 模拟textarea可编辑的效果:contenteditable="true" 高度自适应:给个最小高度属性min-height和默认高度属性 _height即可 HTML代码: <div ...
  • [code="html"] autoTextarea (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:360, //默认最大高度 minH...
  • DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel="stylesheet" href=&...
  • 效果图 ...DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>文本...
  • html自适应高度的一个问题。现在有一个div,里面让一张图片后面跟一个文本框,然后整个div随着浏览 Document *{margin:0 ;padding:0;} .demo{margin-left:46px;height:45px;margin-top: 100px;} .forimg{margin-left...

空空如也

空空如也

1 2 3 4 5
收藏数 82
精华内容 32
关键字:

html文本框自适应