這次帶給大家JS實作輸入框內灰色文字提示，JS實作輸入框內灰色文字提示的注意事項有哪些，以下就是實戰案例，一起來看一下。
如何透過js實作html的placeholder屬性效果呢
##我們需要這樣做：
<!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屬性效果範例：<!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>
推薦閱讀：
使用jquery取得上傳檔案具體內容#使用ES6中class模仿Vue做出雙向綁定以上是JS實作輸入框內灰色文字提示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
