Home > Article > Web Front-end > JS implements gray text prompts in the input box
JS implements gray text prompts in the input box
- php中世界最好的语言Original
- 2018-06-07 11:32:362707browse
This time I will bring you JS to implement gray text prompts in the input box. What are the precautions for JS to implement gray text prompts in the input box? The following is a practical case, let's take a look.
How to achieve the placeholder attribute effect of html through js
We need to do this:
<!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>
Supplement:
Here is another example of the placeholder attribute effect implemented by jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>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>
I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Use jquery to obtain the specific content of uploaded files
Use classes in ES6 to imitate Vue to make two-way binding Certainly
The above is the detailed content of JS implements gray text prompts in the input box. For more information, please follow other related articles on the PHP Chinese website!