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

目录
文章目录隐藏
  1. CSS3 :empty 选择器
  2. CSS content 属性
  3. 插入纯文字
  4. 嵌入文字符号
  5. 插入图片
  6. content 和 attr 配合使用
  7. content 里的字符串连接操作
  8. 插入元素的属性值
  9. 为非 input 元素添加 placeholder 属性方法
  10. 结束语

最近在做 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:///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 相关知识重新认识一次,加深记忆。所以小知识点也有大作为,也欢迎大家留言讨论更好地实现方法。

「点点赞赏,手留余香」

12

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何给div等非input元素添加placeholder属性呢

发表回复