使用div模拟textarea文本域实现高度自适应

使用div模拟textarea文本域实现高度自适应

textarea本身没有自适用的技能,文字过多就会出现滚动条的,所以我们要转变思维曲线救国。

使用很简单,一个普通的block元素上加个contenteditable=”true”就可以了

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hh { min-height: 20px;width: 200px; _height: 200px;border: 1px solid pink }
    </style>
</head>
<body>
<div contenteditable="true" class="hh"></div>
<a href="" id="kk">点击</a>
</body>
<script src="js/jquery-2.0.3.min.js"></script>
</html>
<script>
    $(function(){
        $('#kk').on('click',function(){
            alert($('.hh').text())//获取div中的内容
        })
    })
</script>

可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,需要添加下面的样式:outline:0;

猜你喜欢

转载自blog.csdn.net/SuperCookies/article/details/80777091