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

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

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

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

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

CSS3 :empty 选择器

定义和用法

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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

CSS content 属性

定义和用法

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

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

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

说明

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

插入纯文字

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

这是p1

这是p2

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]:after {

content: attr(data-line); /* 属性名称上不要加引号！ */

}

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

content里的字符串连接操作

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

/*

div[data-line]:after {

content: "[line " attr(data-line) "]";

}

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

插入元素的属性值

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

码云笔记前端博客

a:after{

content:attr(href);

}

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

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

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

.filterText:empty::before{

color:lightgrey;

content:attr(placeholder);

}

效果展示：

由上图可以看到，当span输入框的输入字段为空时，显示我们设置好的提示信息。

当输入新内容后也会和input的placeholder属性一样，自动隐藏提示信息从而显示我们输入的内容。如下图：

结束语

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