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

最新推荐文章于 2023-07-07 16:54:52 发布

SuperCookies

最新推荐文章于 2023-07-07 16:54:52 发布

阅读量260

点赞数

分类专栏： J-S

本文链接：https://blog.csdn.net/supercookies/article/details/80777091

版权

J-S 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用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;

SuperCookies

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用div模拟textarea文本域实现高度自适应

使用div模拟textarea文本域实现高度自适应textarea本身没有自适用的技能，文字过多就会出现滚动条的，所以我们要转变思维曲线救国。使用很简单，一个普通的block元素上加个contenteditable=”true”就可以了&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt...
复制链接

扫一扫