div实现textarea

最新推荐文章于 2024-03-25 20:23:37 发布

tianmeng1999

最新推荐文章于 2024-03-25 20:23:37 发布

阅读量572

点赞数

分类专栏： HTML/HTML5 JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/117413506

版权

JavaScript 同时被 2 个专栏收录

184 篇文章 6 订阅

订阅专栏

HTML/HTML5

26 篇文章 0 订阅

订阅专栏

功能分析

可编辑 contenteditable=true
可改变大小 resize:auto;overflow:auto;
placeholder 添加placeholder属性，通过css选择器获取属性的值，添加到伪类中
监听文本内容是否为空是否显示placeholder

实现过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div实现textarea</title>
    <style>
        .area{
            resize: auto; /*可拖拽*/ 
            overflow: auto; 
            /* 要设置 overflow: auto; 样式，因为resize样式不适用于overflow: visible;的块，不然 resize 不起效；*/
            height: 300px;
            width: 300px;
            border: 1px solid gray;
        }
        .area::after{
            content: attr(aria-placeholder);
            color: gray;
        }
    </style>
</head>
<body>
    <div class="area" aria-placeholder="placeholder提示内容" contenteditable="true"></div>

    <script>
        const area = document.querySelector('.area')
        const placeholder = area.getAttribute('aria-placeholder')
        // 监听dom节点发生变化
        area.addEventListener('DOMCharacterDataModified',function(){
            area.setAttribute('aria-placeholder',this.innerText ? '':placeholder)
        })
    </script>
</body>
</html>

效果展示

在这里插入图片描述

tianmeng1999

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
div实现textarea

可编辑 contenteditable=true可改变大小 resize:auto;overflow:auto;placeholder 添加placeholder属性，通过css选择器获取属性的值，添加到伪类中监听文本内容是否为空是否显示placeholder实现过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv.
复制链接

扫一扫