Home >Web Front-end >JS Tutorial >How to operate JS to realize placeholder attribute prompt text in html
This time I will show you how to operate JS to realize the placeholder attribute prompt text in html. What are the precautions for using JS to implement the placeholder attribute prompt text in html. The following is a practical case. Let’s take a look. .
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:
Supplement:
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:
How to use Vue to write a two-way data binding
How to use Vue to implement a countdown button
The above is the detailed content of How to operate JS to realize placeholder attribute prompt text in html. For more information, please follow other related articles on the PHP Chinese website!