JS實作輸入框內灰色文字提示
- php中世界最好的语言原創
- 2018-06-07 11:32:362779瀏覽
這次帶給大家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>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
使用jquery取得上傳檔案具體內容#使用ES6中class模仿Vue做出雙向綁定以上是JS實作輸入框內灰色文字提示的詳細內容。更多資訊請關注PHP中文網其他相關文章！