码云笔记前端博客
Home > JavaScript > 如何给div等非input元素添加placeholder属性呢

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

2019-10-21 分类:JavaScript 作者:管理员 阅读(106)

本文共计2054个字,阅读时间预计6分钟,干货满满,记得点赞加收藏哦

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

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

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

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

CSS3 :empty 选择器

定义和用法

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

浏览器支持

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

CSS content 属性

定义和用法

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

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

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

说明

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

插入纯文字

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

1
2
3
4
5
6
7
8
9
<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用于添加结束的文字符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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属性也可以直接在元素前/后插入图片

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

content 和 attr 配合使用

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

1
2
3
4
5
/* <div data-line="1"></div> */

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

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

content里的字符串连接操作

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

1
2
3
4
5
/* <div data-line="1"></div> */

div[data-line]:after {
    content: "[line " attr(data-line) "]";
}

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

插入元素的属性值

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

1
2
3
4
5
<a href="https:///www.mybj123.com">码云笔记前端博客</a>

a:after{
    content:attr(href);
}

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

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

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

1
2
3
4
5
6
7
<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) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
12

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 如何给div等非input元素添加placeholder属性呢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8647977 次
  • 最近更新: 2019年11月21日