搜尋框帶有搜尋提示點選消失程式碼例項

antzone發表於2017-03-11

搜尋框大家一定都不陌生，隨時都可以用到。

比較人性化的搜尋框都有這樣的效果，預設情況有搜尋提示，點選搜尋框，提示內容消失。

下面通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var keyword=document.getElementById("keyword");
  keyword.onfocus=function(){
    if(this.value=="請輸入關鍵詞"){
      this.value="";
    }  
  }
  keyword.onblur=function(){
    if(this.value==""){
      this.value="請輸入關鍵詞";
    }  
  }
}
</script>   
</head>  
     
<body>  
<input type="text" value="請輸入關鍵詞" id="keyword"/>
<input type="button" value="點選提交" id="tijiao"/>
</body>  
</html>

如果不考慮低版本IE瀏覽器相容問題，推薦使用placeholder屬性。

HTML5新增上述屬性，非常好的實現了提示功能。

相關文章