如何给div等非input元素添加placeholder属性呢

最近在做web端的SSO工作台项目时,用<span>写了一个输入框,想让它拥有input一样的效果,通过加上placeholder属性来实现输入的字段为空时显示的提示信息,说到这儿大家自己先思考一下,如果是你会怎么做。

我们都知道placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示。

那如何给div等非input元素添加placeholder属性呢?

在实现前为大家普及一下相关知识点

CSS3 :empty 选择器

定义和用法

:empty选择器选择每个没有任何子级的元素(包括文本节点)。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。
如何给div等非input元素添加placeholder属性呢

CSS content 属性

定义和用法

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

.p:after { content: "我是一个使用*content*属性生产的静态文字";  }

请注意,如果想让伪元素:after绝对定位,你必须对你的div设置position: relative。

说明

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

插入纯文字

content:”码云笔记”,或者content:none不插入内容

<p class="p1">这是p1</p>
<p class="p2">这是p2</p>

p1::after{
    content:"p1后插入内容"
}
p2::after{
    content:none
}

嵌入文字符号

可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号,close-quote用于添加结束的文字符号。

p1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
p1::before{
    content:open-quote;
}
p1::after{
    content:close-quote;
}
p2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
p2::before{
    content:open-quote;
}
p2::after{
    content:close-quote;
}

插入图片

content属性也可以直接在元素前/后插入图片

p3::after{
    content:url(图片地址)
}

content 和 attr 配合使用

如果你不想把content内容在CSS里写死,那你可以使用attr表达式来从页面元素中动态的获取内容:

/* <div data-line="1"></div> */
div[data-line]:after { 
	content: attr(data-line); /* 属性名称上不要加引号! */
}

attr属性通常和自定义属性data-配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。

content里的字符串连接操作

这种字符串连接很像常规编程语言了:

/* <div data-line="1"></div> */
div[data-line]:after { 
   content: "[line " attr(data-line) "]"; 
}

还需要用JavaScript里拼装字符串吗?CSS3里就能完成这些,是不是感觉CSS3可以部分的替代Javascript了! attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content对页面的很多其他元素和属性进行操作。

插入元素的属性值

content属性可以直接利用attr获取元素的属性,将其插入到对应位置。

<a href="https:///www.mybj123.com">码云笔记前端博客</a>
a:after{
  content:attr(href);
}

以上就是今天实现给div等非input元素添加placeholder属性需要到的知识点,接着我们来看一下如何实现。

为非input元素添加placeholder属性方法

有了上面知识的补充,所以这里我们就可以简单粗暴的直接上代码了:

<span class="filterText" placeholder="点击选择系统"></span>
<style>
.filterText:empty::before{
  color:lightgrey;
  content:attr(placeholder);
}
</style>

效果展示:
如何给div等非input元素添加placeholder属性呢
由上图可以看到,当span输入框的输入字段为空时,显示我们设置好的提示信息。

当输入新内容后也会和input的placeholder属性一样,自动隐藏提示信息从而显示我们输入的内容。如下图:
如何给div等非input元素添加placeholder属性呢

结束语

以上就是今天码云笔记前端技术博客为大家带来的如何给div等非input元素添加placeholder属性的方法,虽然是用简单的几行css代码实现的,但是能够让我们对css相关知识重新认识一次,加深记忆。所以小知识点也有大作为,也欢迎大家留言讨论更好地实现方法。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何给div等非input元素添加placeholder属性呢

发表评论