首页天道酬勤placeholder怎么用,js向input的value赋值

placeholder怎么用,js向input的value赋值

张世龙 05-06 04:46 56次浏览

最近在做web端SSO工作台的项目时,我想写一个输入框,让它有input那样的效果。 通过添加placeholder属性,提供输入的字段为空时显示的提示信息。 到此为止,自己想想吧。 如果是你怎么办?

我们知道,placeholder是html5属性,它提供了一个提示信息hint,用于描述输入字段的期望值,如果输入字段为空,则显示该信息。

那么,如何将placeholder属性添加到非输入元素(如div )中?

请在实现之前向大家普及知识点

CSS3 :empty选择器

定义和使用方法

:empty选择器选择每个没有包含文本节点的子代的元素。

浏览器支持

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

CSS内容属性

定义和使用方法

content属性与:before和:after伪元素一起使用以插入生成的内容。

. p:after { content: '我使用*content*属性创建的静态字符'; }

请注意,要绝对定位伪元素:after,必须为div设置位置: relative。

说明

此属性定义了放置在元素之前或之后的生成内容。 默认情况下,这通常是内联内容,但在此内容中创建的框类型可以由属性display控制。

插入纯文本

内容:“代码云注释”或内容: none不插入内容

这是p1

这是p2

p1:after{

在内容: ' p 1后插入内容'

}

p2:after{

内容: none

}

嵌入文本符号

要在字符串两侧添加嵌套字符符号(如括号、单引号和双引号),请使用content属性的open-quote属性值和close-quote属性值。 open-quote用于添加开始字符符号,close-quote用于添加结束字符符号。

p1{

quotes: (() ) ); /*使用元素的quotes属性输入字符符号*/

}

p1:before{

内容:开放-队列;

}

p1:after{

内容:关闭-队列;

}

p2{

quotes:'\'' '\"; /*添加双引号必须转义*

}

p2:before{

内容:开放-队列;

}

p2:after{

内容:关闭-队列;

}

插入图像

content属性还可以直接在元素前后插入图像

p3:after{

内容: URL (图像地址)

}

内容和attr并用

如果不想将内容内容写入CSS,可以使用attr表达式从页面元素动态检索内容。

/*

div [数据线] : after {

内容: attr (数据行; /*请勿在属性名称中加上引号。 */

}

attr属性通常与自定义属性data-结合使用。 这是因为传统的其他属性也可以存储值,但通常不适合存储表示文本。

content中的字符串连接操作

此字符串连接类似于常规编程语言。

/*

div [数据线] : after {

内容: ' [ line ' attr (数据线) ] );

}

需要用JavaScript组装字符串吗? 可以用CSS3做这些。 感觉CSS3可以代替Javascript的一部分吗! attr动态生成页面内容的能力真的是令人兴奋的事情。 你实际上可以用它与content合作来操作页面的许多其他元素和属性。

插入元素的属性值

content属性可以使用attr直接检索元素的属性并将其插入到相应的位置。

代码云笔记本前端博客

a:after{

内容: attr (href;

}

以上是今天向非输入元素(如div )添加placeholder属性时必须实现的知识点。 接下来,让我们来看看如何实现。

将placeholder属性方法添加到非input元素

有了上面的知识补充,在这里可以很容易粗暴地直接上代码:

. filter text : empty :3360 before {

color :灯光绿色;

内容: Attr (placeholder;

}

效果演示:

从上图可以看到,如果span输入框中的输入字段为空,则会显示我们设置的提示信息。

输入新内容时,提示信息将自动隐藏,并显示输入的内容,就像输入的placeholder属性一样。 下图:

结束语

以上是当今代码云笔记本前端技术博客为您带来的如何将placeholder属性添加到非输入元素(如div )中的方法。 虽然用简单的几行css代码实现了,但是可以重新认识有关css的知识,加深记忆。 所以,小知识点也有很大的工作,欢迎大家的信息来探讨更好的实现方法。

ie浏览器typeerror对象不支持,textarea的属性