自适应高度文本框

自适应高度文本框,没有滚动条,并且随内容多少自动变换高度,美观方便。

方法一:
css代码:

    <style type="text/css">
    .textarea{
        width: 99%; 
        min-height: 20px; 
        _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(171,173,179, 0.8);
    }
    </style>

html代码:

<div id="divId" class="textarea" style="margin-top:0px;" contenteditable="true">
    <br />
</div>

这时如果需要设置div中的内容可以用:
document.getElementById(“divId”).innerText=”内容”;
设置;
获取里边的值可以用:
var value=document.getElementById(“divId”).innerText;
或者
var beiZhu=$(“#div_beiZhu”).text(); –这是jquery代码
来获取。
获取的值如果需要存入数据库,如SQLServer,该字段类型只能用vchar(**)来保存,如果用别的类型或是text类型的话,需要保存的值中的 换行 和 空格 会出现不同的问题。所以可以适用于小容量的需要。

方法二:
这是代码:

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 1px solid #a0b3d6;
    overflow: auto;
    min-height: 20px; 
    max-height: 500px;
    /*高度值根据屏幕高度设置,是为了防止文本框高度大于屏幕高度后再点击换行或空格时,页面自动定位到文本框顶端,那么页底文字就看不到的情况。    这也是该方法缺点之一,上一个方法就不会出现这个问题*/
    padding: 0;
    outline: none;
    background-color: #fff;
    resize: none;
    margin-top:0px;
    width:100px;
}
</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';
        var vHeight= text.scrollHeight + 2;
        text.style.height =vHeight +'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="" rows="" id="text"></textarea>
</body>
</html>

这个方法的文本框的值可以在数据库中用任意字段类型保存,格式都不会出现错乱。只是代码量较多,使用麻烦。

两种方法优缺点比较:
第一种代码简洁,使用方便,可以大量使用,只是存储会出现一定问题。
第二种代码较复杂,但是适用范围更广,存储更加灵活方便。

发布了25 篇原创文章 · 获赞 18 · 访问量 15万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章