Home > Article > Web Front-end > JS implements placeholder with prompt effect in html
JS implements placeholder with prompt effect in html
- php中世界最好的语言Original
- 2018-04-27 16:27:281949browse
This time I will bring you JS to implement placeholder with prompt effect in html. What are the precautions for placeholder with prompt effect in html? The following is a practical case, let's take a look. z
How to realize 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>The operation effect is as follows:
Addition:
Here is another example of the placeholder attribute effect implemented by jQuery:
<!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> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Detailed explanation of the use of api interface in vue project
The steps for passing values from the vue parent component to the parent component Detailed explanation
The above is the detailed content of JS implements placeholder with prompt effect in html. For more information, please follow other related articles on the PHP Chinese website!