这次给大家带来如何操作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>
|
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
