div模拟textarea以实现高度自适应实例页面

作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

    <title>div模拟textarea以实现高度自适应实例页面</title>

    <style type="text/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;

    }

    </style>

</head>

<body>

    <h3 style="text-align:center;margin:20px 0 20px 0">div模拟textarea以实现高度自适应实例页面</h3>

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

</body>



<script type="text/javascript">

if (typeof document.webkitHidden == "undefined") {

    // 非chrome浏览器阻止粘贴

    box.onpaste = function() {

        return false;

    }

}

</script>

</html>

你可能感兴趣的:(textarea)