textarea如何實現高度自適應

時間 2019-11-16

原文原文鏈接

方法一：div模擬textarea文本域輕鬆實現高度自適應 HTML代碼javascript

<div class="textarea" contenteditable="true"><br /></div>
複製代碼

CSS代碼java

.textarea{
    width: 400px; 
    min-height: 20px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    line-height: 24px;
    padding: 2px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
 
    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);
}
複製代碼

CSS代碼中，由於IE6不支持min/max，因此作了hack 方法二：文本框textarea根據輸入內容自適應高度 HTML代碼web

<textarea id="textarea" placeholder="回覆內容"></textarea> 
 <script> 
      var text = document.getElementById("textarea");
      autoTextarea(text);// 調用
 </script>
複製代碼

CSS代碼bash

#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);
}
複製代碼

JS代碼less

/**
 * 文本框根據輸入內容自適應高度
 * @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();
};
複製代碼

Vue

<template>
   <div class="textarea-con">
   	<p class="upload-title-tit strong">視頻標題 <img src="./img/icon_fbsp_bitian.png" /> </p>
   	<div class="textarea check" contenteditable="true" placeholder="標題最少8個字"></div>
   	<div class="textarea-check">
   		<div>請輸入最少8個字的視頻標題</div>
   		<div>7/30</div>
   	</div>
   </div>
</template>

<style lang="less" scoped="scoped">
   .textarea-con {
   	width: 100%;
   	box-sizing: border-box;
   	.upload-title-tit {
   		font-size: 54px;
   		color: #000000;
   		letter-spacing: 0;
   		display: flex;
   		justify-content: flex-start;
   		align-items: center;
   		img {
   			width: 24px;
   			height: 24px;
   			margin-left: 15px;
   		}
   	}
   	.textarea {
   		-webkit-user-select: text;
   		width: 100%;
   		min-height: 20px;
   		padding: 40px 0px 20px;
   		border-bottom: 1px solid #FF4141;
   		word-wrap: break-word;
   		overflow-x: hidden;
   		overflow-y: auto;
   		font-size: 48px;
   		color: #000000;
   		letter-spacing: 0;
   		line-height: 70px;
   		&.check {
   			border-bottom: 1px solid #B3B3B3;
   		}
   		&.introduction {
   			min-height: 380px;
   		}
   		&:empty:before {
   			font-size: 48px;
   			content: attr(placeholder);
   			color: #B3B3B3;
   			letter-spacing: 0;
   			text-align: justify;
   			line-height: 72px;
   		}
   		&:focus {
   			content: none;
   		}
   	}
   	.textarea-check {
   		display: flex;
   		justify-content: space-between;
   		align-items: center;
   		margin-top: 40px;
   		font-size: 40px;
   		color: #FF4141;
   		letter-spacing: 0;
   		line-height: 33px;
   	}
   }
</style>

<script type="text/javascript">
   export default {
   	data() {
   		return {

   		}
   	},
   	components: {

   	},
   	mounted() {

   	},
   	methods: {

   	}
   }
</script>
複製代碼

解決移動端鍵盤遮擋表單

window.addEventListener('resize', function() {
				if(
					document.activeElement.tagName === 'INPUT' ||
					document.activeElement.tagName === 'TEXTAREA' ||
					document.activeElement.getAttribute('contenteditable') == 'true'
				) {
					window.setTimeout(function() {
						if('scrollIntoView' in document.activeElement) {
							document.activeElement.scrollIntoView();
						} else {
							document.activeElement.scrollIntoViewIfNeeded();
						}
					}, 0);
				}
			});
複製代碼