zoukankan      html  css  js  c++  java
  • 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题

    <style>

    #textarea {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    250px;
    font-size: 14px;
    height: 100px;
    line-height: 24px;
    padding: 2px;
    word-break: break-all;
    word-wrap: break-word;
    }

    </style>

    <body>

    <textarea id="textarea" placeholder="回复内容">参加杨浦区党校的党员培训学习</textarea>

    </body>

    <script>

    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); // 调用

    </script>

    内容部分转载于    心郎 CSDN

  • 相关阅读:
    Python split()方法分割字符串
    Python创建线程
    Python find()方法
    webpack中‘vant’全局引入和按需引入【vue-cli】
    webpack中‘mint-ui’全局引入和按需引入【vue-cli】
    nginx中 处理post方式打开页面的报错405
    nginx中 vue路由去掉#后的配置问题
    webpack中 VUE使用搜狐ip库查询设备ip地址
    webpack中 VUE使用百度地图获取地理位置
    VUE动态设置网页head中的title
  • 原文地址:https://www.cnblogs.com/ermaoblog/p/10564886.html
Copyright © 2011-2022 走看看