这次给大家带来如何操作JS实现html中placeholder属性提示文字,操作JS实现html中placeholder属性注意事项提示文字的
有哪些,下面就是实战案例,一起来看一下。
如何通过js实现html的placeholder属性效果呢
我们需要这样做:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>JS实现placeholder属性效果</title>
<script>
function
bl(){
var
a=document.getElementById(
"inpt"
);
if
(a.value.length<=0){
a.style.color=
"#999999"
;
a.value=
"请输入姓名"
;
}
}
function
fo(){
var
a=document.getElementById(
"inpt"
);
if
(a.value==
"请输入姓名"
){
a.style.color=
"black"
;
a.value=
""
;
}
}
</script>
</head>
<body>
<input style=
"color: #999999;"
value=
"请输入姓名"
id=
"inpt"
type=
"text"
onblur=
"bl()"
onfocus=
"fo()"
/>
</body>
</html>
|
运行效果如下:
补充:
这里再为大家补充一个jQuery实现的placeholder属性效果示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>www.jb51.net jQuery实现placeholder属性效果</title>
<script src= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
</head>
<body>
<input style= "color: #999999;" data-value= "请输入姓名" id= "inpt" type= "text" />
<script>
function placeHolder(event){
var self = $(this), selfDataValue = self.attr( "data-value" ), selfValue = self.val();
if (selfDataValue){
event.type == "click" ? (selfValue == selfDataValue && (self.val( "" ).css( "color" , "#333" ))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css( "color" , "#A9A9A9" ))))
} else {
return false;
}
}
$( "#inpt" ).on( "click blur" ,placeHolder);
</script>
</body>
</html>
|
倒计时时间到后,恢复按钮点击,常用于阅读协议:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>阅读协议倒计时</title>
<script>
var
tim=9;
function
aaa(){
var
btnn=document.getElementById(
"btn"
);
if
(tim<=0)
{
btnn.value=
"注册"
;
btnn.disabled=
""
;
}
else
{
btnn.value=
"请仔细阅读,还剩"
+tim+
"秒"
;
tim--;
}
}
setInterval(
"aaa()"
,1000);
</script>
</head>
<body>
<textarea style=
"width: 500px;height: 300px;"
>
</textarea>
<input type=
"button"
id=
"btn"
value=
"请仔细阅读,还剩10秒"
disabled=
"disabled"
/>
</body>
</html>
|
使用setInterval
实现计时,并且满60秒向分钟进一,满60分钟向小时进一。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title> JS计时器</title>
<script>
window.onload =
function
(){
var
mm = 0;
var
ss = 0;
var
str =
''
;
var
timer = setInterval(
function
(){
str =
""
;
if
(++ss==60)
{
if
(++mm==60)
{
mm=0;
}
ss=0;
}
str+=mm<10?
"0"
+mm:mm;
str+=
":"
;
str+=ss<10?
"0"
+ss:ss;
document.getElementById(
"d"
).innerHTML = str;
},1000);
};
</script>
</head>
<body>
<p id=
"d"
></p>
</body>
</html>
|