可编辑的div内容为空时显示placeholder

最新推荐文章于 2025-03-18 17:24:22 发布

原创最新推荐文章于 2025-03-18 17:24:22 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

CSS 专栏收录该内容

6 篇文章

订阅专栏

这篇文章展示了如何使用CSS来定义一个编辑框的样式，包括宽度、内边距、圆角、边框以及字体大小等，并特别说明了如何在输入框为空时显示占位符文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
  .edit-box {
    width: 180px;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    outline: none;
  }
  /* 输入框为空时显示 placeholder */
  .edit-box:empty:before {
    content: attr(placeholder);
    color: #666;
  }
</style>

<body>
  <div class="edit-box" contenteditable="true" placeholder="请输入内容"></div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小小的学习日记

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【vue】可编辑div部分字段高亮

u011250535的博客

06-04

1549

【vue】可编辑div部分字段高亮参考了帖子：https://segmentfault.com/a/1190000008261449以及帖子：https://blog.csdn.net/smartsmile2012/article/details/53642082这次的组件：1.通用性不强，是为了特殊功能而制定的，放在这里是为了方便日后查阅内部的相关知识点；2.实现的是输入类似(1and2or3)...

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作

codingWeb的博客

11-07

9323

这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素

参与评论您还未登录，请先登录后发表或查看评论

【HTML】div设为输入框，巧妙添加placeholder效果

此人太懒，没有任何简介

03-11

955

html css

div实现placeholder的效果

weixin_45855469的博客

09-07

1133

用来选中没有子节点的元素，这里的子节点包括元素节点和文本节点（包括空格），注释、处理指令和通过css设置的content属性不会影响。请注意，除了注释之外，大部分处理指令都是与服务器端交互相关的，并且需要服务器端进行相应的处理才能生效。：这是HTML中的注释标记，在此处编写的内容不会被浏览器呈现给用户，只是作为开发者的备注信息。：这是PHP的处理指令，用于嵌入服务器端的PHP代码到HTML文档中，实现动态内容生成。的效果，即输入框中没有内容的时候显示提示，用户输入内容后提示就消失。

使用 可编辑div 遇到的坑（div实现placeholder）

Dark_programmer的博客

01-04

2143

关于输入，input和textarea可以满足我们90%以上的需求，但人有些需求无法满足。此时，我们就可以使用div等一些标签来实现属性：contenteditable是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许编辑。当标签加上这个属性时，就可进行内容编辑，来实现输入的效果。并且实现placeholder效果 <div contenteditable placeholder='请输入文字'></div> .input{

div添加placeholder属性

leveretz的博客

11-10

1913

div添加placeholder属性

js实现可编辑的div，并在光标处插入元素

weixin_44817017的博客

03-30

7765

js实现可编辑的div，并在光标处插入元素定义一个可以编辑的div，用户可以输入内容，并根据需要在光标处插入HTML元素或文本内容。并且实现placeholder的效果文章目录js实现可编辑的div，并在光标处插入元素一、可编辑的div 和 placeholder效果二、在光标位置插入元素1. 获取div输入的内容2.在光标位置插入按钮一、可编辑的div 和 placeholder效果关键点：contenteditable属性标签的contenteditable属性可以设置元素内容是否

react-div-contenteditable:React钩子组件，用于纯文本的内容可编辑div

03-29

该软件包为内容可编辑的div提供了一个小的功能性React组件，该div限于纯文本（不格式化“粗体”，“斜体”等）。安装 npm install @mroc/react-div-contenteditable 例子 import DivContentEditable from "@mroc/...

editableDiv jQuery插件：实现DIV内容可编辑与占位符功能

- 在内容为空时显示占位符，在用户开始输入时隐藏占位符，并在输入内容清空后重新显示占位符。 5. jQuery与HTML的交互： - jQuery提供了丰富的选择器和方法来操作HTML元素，这包括读取、修改和添加元素的内容。 ...

基于Element UI 封装的Vue可编辑div输入组件，可实现@人员和发送剪切板文件

weixin_45058982的博客

12-30

1768

文章目录设计背景使用效果代码实现template模板可编辑div及@部分script部分style部分浏览器兼容性设计背景最近客户提出要在输入框中实现类似微信@人和发送截图功能，于是考虑到使用可编辑div来代替input输入框使用效果先上图，看效果发送截图功能暂不展示，可参考实现代码实现 template模板可编辑div及@部分 <div> <div id="atInputComponents"> <div ref="editD

css对div contenteditable的placeholder的效果

fhb19870610的专栏

05-15

5984

.rich{ color:#000; width:100px; height:100px; } .rich:empty:before{ content: attr(data-placeholder); color:#bbb; } .rich:focus:before{ content:non

使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）(1)

csdnlaoban的博客

05-16

765

可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。

div中使用placeholder

最新发布

u013553807的博客

03-18

372

伪元素显示提示文本。

html5输入空白提示,HTML5 placeholder(空白提示)属性介绍

weixin_42696271的博客

06-10

344

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性，placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏...

VSCode 开发Vue必备插件

2301_78416672的博客

05-06

890

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

实现div里面有placeholder形式

ayuqian6000的博客

09-04

1239

样式中设置content为元素的data-值 p{ color: deepskyblue; } p:before{ content: attr(data-beforeContent); color: darkred; } 然后js修改 $('p').on('click',functi...

div设置contenteditable=“true“实现 placeholder效果

weixin_45535843的博客

03-12

379

这样就可以实现了，如上图我在disabled的时候也需要展示，所以多加了一条。

div 实现 input、textarea 输入框，支持 placeholder 属性

qq_40287084的博客

05-20

430

div 实现 input、textarea 输入框，支持 placeholder 属性