div contenteditable=“true”后，placeholder的样式。

最新推荐文章于 2024-05-20 16:58:10 发布
最新推荐文章于 2024-05-20 16:58:10 发布
阅读量2.6k 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang562878311/article/details/69525301
版权

html:

<div contenteditable="true" class = "shut-down" placeholder="placeholder"></div>

css: 

.shut-down:empty:before{
    content:attr(placeholder);
    font-size: 13px;
    color: #999;
}
.shut-down:focus:before{
    content:none;
}


Mr灬Fang
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
contenteditable元素的placeholder输入提示语设置方法
09-24
主要介绍了contenteditable元素的placeholder输入提示语设置方法,需要的朋友可以参考下
contenteditable型的编辑框，实现placeholder
dd1145322563的专栏
08-08 1403
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;contenteditable&lt;/title&gt; &lt;style&gt; .content{ width:380px; height:100px
div 实现 input、textarea 输入框，支持 placeholder 属性
最新发布
qq_40287084的博客
05-20 92
div 实现 input、textarea 输入框，支持 placeholder 属性
div 设置contenteditable 之后的placeholder效果
Wq_2977的博客
05-21 1982
假设有个id为“editBox”的div，需求是 1、其可编辑 --->对其设置contenteditable =“true”，即可； 2、拥有类似input的“placeholder”效果 --->解决方案如下： // HTML： <div class="container"> <div class="bgholder">请输入内容...
css对div contenteditable的placeholder的效果
fhb19870610的专栏
05-15 5915
.rich{     color:#000;     width:100px;     height:100px; } .rich:empty:before{     content: attr(data-placeholder);     color:#bbb; } .rich:focus:before{     content:non
vue3 给div加contenteditable=“true”后，显示placeholder
qdm13209211861的博客
05-17 619
【代码】vue3 给div加contenteditable=“true”后，显示placeholder。
通过创建style标签给 contenteditable=“true“ 的可编辑元素增加placeholder(占位符)
weixin_46858893的博客
06-08 536
contenteditable 可编辑元素增加 placeholder(占位符)
如何更改placeholder属性中文字颜色
zjsfdx的博客
02-27 1906
熟悉HTML5的人应该都知道，placeholder这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE） 适用范围：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 pas...
前端----HTML/CSS 修改placeholder的颜色
热门推荐
nO0b
09-24 2万+
    placeholder这个属性是HTML5中新增的属性，作用是描述输入字段预期值的提示信息 如何修改placeholder的颜色呢? 但是存在一定的浏览器兼容问题,以chorme为例: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt...
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 3591
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
react-div-contenteditable:React钩子组件，用于纯文本的内容可编辑div
03-29
React Div ContentEditable 该软件包为内容可编辑的div提供了一个小的功能性React组件，该div限于纯文本（不格式化“粗体”，“斜体”等）。 安装 npm install @mroc/react-div-contenteditable 例子 import ...
可输入文字的div标签
01-08
<div id="myInput" class="input" contenteditable="true" placeholder="请输入文字..."></div> ``` 在这个示例中，`.input`类定义了`<div>`的样式，使其看起来像一个输入框，而`contenteditable="true"`则启用...
angularjs使用div模拟textarea文本框的方法
12-29
ng-model=view.text contenteditable=true placeholder=请输入内容></div> Angularjs指令： /** * div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { return { ...
editableDiv:Contenteditable 具有占位符功能的 jQuery 插件
06-12
例如，一个 div 元素可以通过设置 `contenteditable="true"` 来启用这一功能。然而，当 div 内无内容时，用户可能不清楚这个区域是可以编辑的，这就需要占位符文本来提示用户。`editableDiv` 插件解决了这个问题，它...
设置div等标签变为输入框以及placeholder配置
qq_58174484的博客
07-24 2191
ps：这里是根据tableList循环生成的输入框，在里面添加了placeholder属性，确保每个placeholder都是真正想要的不一样的属性。下面举一个例子（此处item.value为输入框中对应的值，当值为空时，展示placeholder。这是一个很神奇的属性，可以很轻易的实现该效果。（提高attr获取自定义的default-placeholder属性值，并添加为伪元素的内容）1.先自定义两个属性，一个用于存放默认的placeholder值，另一个备份一个真正的值。希望本文会对你有所帮助 ^_^
有趣的contentEditable属性，实现div可编辑
土匪丁的博客
04-06 2186
当需求需要在文本输入中加入一些样式，并按删除键遇到某些样式的为多个文字整体删除，使用textArea是无法实现的，textArea中没有办法写单独样式，或者加入其他标签和组件。这时候就需要使用到contentEditable属性，将div或者一些其他标签可编辑。 这样便可以简单实现一个可编辑的div，需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除，但是此时控制地台会报一个警告，如下图 需要加上suppressContentEditabl
H5 contenteditable 可编辑区域 以及 实现 placeholder
u014206461的博客
07-09 1031
一：H5 元素内容可编辑 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。您必须指定它，例如，<element contenteditable="true|false">。 注意: 当contenteditable元素上没有设置属性时，它将从其父元素继承。 <h2> Shoppping List(Content Editable) </h2> <ul class="content-editable"
div标签的contenteditable属性实现input效果以及控制input的聚焦失焦
楚楚梦厦的博客
11-10 5348
在触屏(移动端网页)中，聊天室类型的输入框很常见，但是很多都是自定义样式的，直接改造input标签会很麻烦。 给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式。 利用input事件和v-text可以达到动态绑定“input”输入框的效果 利用focus和blur方法可以控制“input”输入框的键盘展开收起 <div contenteditable="true" ref="inputMsg" v-text="inputText" @input="i
table { border-collapse: collapse; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } table img { max-width: 150px; height: auto; } <table id="myTable"> <thead class="sticky-header"> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </thead> <tbody> <tr> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td contenteditable="true">Particle</td> </tr> </tbody> </table>这个表格怎么设置自定义调整列宽
07-16
<th contenteditable="true" style="width: 150px">Layer(Code) <th contenteditable="true" style="width: 150px">Type <th contenteditable="true" style="width: 150px">Dpet <th contenteditable="true" style=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值