如何给div添加placeholder属性

最新推荐文章于 2024-05-20 16:58:10 发布
最新推荐文章于 2024-05-20 16:58:10 发布
阅读量2.3k 收藏 4
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamenw/article/details/72830537
版权
  1. <!DOCTYPE <html>  
  2. <head>  
  3.     <title></title>  
  4.     <style type="text/css">  
  5.         .input{  
  6.             width:200px;  
  7.             height:30px;  
  8.             border:1px solid grey;  
  9.         }  
  10.         .input:empty::before{  
  11.             color:lightgrey;  
  12.             content:attr(placeholder);  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="input" contenteditable placeholder="请输入文字"></div>  
  18. </body>  
  19. </html>  

Ailsa-show
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML】div设为输入框，巧妙添加placeholder效果
此人太懒，没有任何简介
03-11 585
html css
div添加placeholder属性
showkw的博客
05-07 3105
在div标签中使用placeholder属性的写法 contenteditable属性是设置为div为可编辑状态 <div class="inputsx" placeholder="说点什么…" contenteditable></div> .inputsx { width: 150px; height: 50px; border: 1px solid #aaa; } .inpu
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
2401_84152177的博客
05-16 655
你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！**](https://bbs.csdn.net/topics/618191877)可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。
让div支持placeholder属性/模拟输入框的placeholder属性
fang562878311的博客
01-09 6871
实现方式：css div:empty:before{ content: attr(placeholder); color:#bbb; } div:focus:before{ content:none; }
div实现placeholder的效果
weixin_45855469的博客
09-07 733
用来选中没有子节点的元素，这里的子节点包括元素节点和文本节点（包括空格），注释、处理指令和通过css设置的content属性不会影响。请注意，除了注释之外，大部分处理指令都是与服务器端交互相关的，并且需要服务器端进行相应的处理才能生效。：这是HTML中的注释标记，在此处编写的内容不会被浏览器呈现给用户，只是作为开发者的备注信息。：这是PHP的处理指令，用于嵌入服务器端的PHP代码到HTML文档中，实现动态内容生成。的效果，即输入框中没有内容的时候显示提示，用户输入内容后提示就消失。
实现placeholder效果的方案汇总
09-03
然而，正如描述中提到的，`placeholder`属性并非所有浏览器都支持，尤其是较旧版本的Internet Explorer（IE6至IE9）。因此，为了确保在各种浏览器中都能实现一致的用户体验，我们需要寻找替代方案。 ### 方案一：...
可输入文字的div标签
01-08
`placeholder`属性提供了一个占位提示文本，当`<div>`为空时显示。 除了`<div>`，其他如`<p>`（段落）、`<span>`（内联元素）等标签也可以通过同样的方式变成可编辑的元素。这在构建富文本编辑器、评论系统或者任何...
jQuery下拉菜单选中添加代码
06-24
总结来说，这个jQuery下拉菜单选中添加代码的核心是使用jQuery进行事件监听和DOM操作，通过添加和移除类来控制选中状态，同时利用数据属性(data-*)来存储附加信息。结合过滤搜索功能，使得用户可以更方便地管理和...
div css手机网站login表单特效特效代码
03-20
对于手机端，可能还需要设置`input`元素的宽度、高度、placeholder样式，以及添加触摸反馈效果，如`transition`和`:active`伪类。 对于登录表单的特效，CSS3引入了许多新的功能，如动画和过渡效果。我们可以通过`...
html非input元素,如何给div等非input元素添加placeholder属性呢
weixin_39598501的博客
06-10 548
最近在做web端的SSO工作台项目时，用写了一个输入框，想让它拥有input一样的效果，通过加上placeholder属性来实现输入的字段为空时显示的提示信息，说到这儿大家自己先思考一下，如果是你会怎么做。我们都知道placeholder是html5的一个属性，它提供可描述输入字段预期值的提示信息(hint)，该提示会在输入字段为空时显示。那如何给div等非input元素添加placeholder...
普通 div 模拟 placeholder
dandan666dandan的博客
06-09 649
这是由于我们项目中使用的 quasar 组件里的 editor（实际是 div 元素）的占位符问题引起的探讨。 首先说明一下，非表单元素如 div 可以通过加一个 contenteditable 为 true 来实现可编辑。然后给该元素添加占位符样式。 最终采用的纯css实现普通div的placeholder效果的方法如下： html： <div class="rich-text" contenteditable="true" placeholder="请输入"></div> cs
实现div里面有placeholder形式
ayuqian6000的博客
09-04 1191
样式中设置content为元素的data-值 p{ color: deepskyblue; } p:before{ content: attr(data-beforeContent); color: darkred; } 然后js修改 $('p').on('click',functi...
设置div等标签变为输入框以及placeholder配置
qq_58174484的博客
07-24 2214
ps：这里是根据tableList循环生成的输入框，在里面添加了placeholder属性，确保每个placeholder都是真正想要的不一样的属性。下面举一个例子（此处item.value为输入框中对应的值，当值为空时，展示placeholder。这是一个很神奇的属性，可以很轻易的实现该效果。（提高attr获取自定义的default-placeholder属性值，并添加为伪元素的内容）1.先自定义两个属性，一个用于存放默认的placeholder值，另一个备份一个真正的值。希望本文会对你有所帮助 ^_^
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 524
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
div 实现 input、textarea 输入框，支持 placeholder 属性
最新发布
qq_40287084的博客
05-20 113
div 实现 input、textarea 输入框，支持 placeholder 属性
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）(1)
csdnlaoban的博客
05-16 453
可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。
移动端的坑 之 在可编辑的div中实现placeholder
weixin_30339969的博客
07-05 405
1.当我们个 div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现placeholder 直接写上去是没有效果的 <div contenteditable="true" placeholder="please write infomation"></div>//没有效果 2.可以添加样式来实现 ...
div 设置placeholder
05-21
`div` 元素本身并没有 `placeholder` 属性，该属性通常用于表单元素，如 `input` 和 `textarea`。如果你想在 `div` 中添加类似于 `placeholder` 的提示信息，可以使用以下方法： 1. 在 `div` 中添加文本内容，并设置样式使其看起来像是 `placeholder`。例如： ```html <div style="color: gray;">请输入搜索关键词</div> ``` 2. 使用 JavaScript 在 `div` 中添加提示信息，当用户输入内容时自动清除提示信息。例如： ```html <div id="search-box"></div> <script> const searchBox = document.getElementById('search-box'); searchBox.innerText = '请输入搜索关键词'; searchBox.addEventListener('click', () => { searchBox.innerText = ''; }); </script> ``` 上述代码使用 `click` 事件，在用户点击 `div` 时清空提示信息。你可以根据实际需求修改事件类型和触发条件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值