輸入框實現高度自適應的幾種解決方案

時間 2019-11-19

標籤輸入實現高度自適應幾種解決方案欄目 CSS 简体版

原文原文鏈接

最近在工做中遇到這個問題了，網上找了一些解決方案，全都試了一遍，有些沒用有些有用，在此把靠譜的方法寫出來。

一.div模擬textarea以實現高度自適應

CSS代碼：

.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-modify: read-write-plaintext-only;
}

HTML代碼：

<div class="test_box" contenteditable="true"><br /></div>

JS代碼：

if (typeof document.webkitHidden == "undefined") {
    // 非chrome瀏覽器阻止粘貼
    box.onpaste = function() {
        return false;
    }
}


注意事項：

1.焦點：outline:0;

2.清除p標籤的margin值：.test_box p{ margin: 0; }

3.可編輯模式的div標籤與textarea同樣，是支持focus, blur事件的。天然也支持focus僞類，demo頁面中Firefox等現代瀏覽器獲取焦點時的外發光就是使用的:focus。

二.用JS控制來實現：方法一

< script type = "text/javascript" >

//基本函數*2

var addHandler = window.addEventListener?

function(elem,event,handler){elem.addEventListener(event,handler);}:

function(elem,event,handler){elem.attachEvent("on"+event,handler);};

var $ = function(id){return document.getElementById(id);}

function autoTextArea(elemid){

//新建一個textarea用戶計算高度

if(!$("_textareacopy")){

var t = document.createElement("textarea");

t.id="_textareacopy";

t.style.position="absolute";

t.style.left="-9999px";

document.body.appendChild(t);

}

function change(){

$("_textareacopy").value= $(elemid).value;

$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";

}

addHandler($("target"),"propertychange",change);//for IE

addHandler($("target"),"input",change);// for !IE

$(elemid).style.overflow="hidden";//一處隱藏，必須的。

$(elemid).style.resize="none";//去掉textarea能拖拽放大/縮小高度/寬度功能

}

addHandler(window,"load",function(){

autoTextArea("target");

});

</ script >

< textarea id = "target" rows = "" cols = "" ></ textarea >

三.用JS控制來實現：方法二

<!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>javascript