點選搜尋框清空搜尋提示文字

admin發表於2018-03-16

搜尋框通常帶有一定的提示語言，點選搜尋框的時候，清除提示語，然後輸入自己要搜尋的關鍵詞。

HTML5提供了placeholder屬性，可以更為科學的實現此功能，如果不考慮瀏覽器相容性問題，推薦使用。

下面是利用JavaScript實現的此功能，程式碼例項如下：

[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 otxt=document.getElementById("txt");
  otxt.onfocus=function(){
    if(this.defaultValue=="輸入搜尋關鍵字"){
      this.value="";
    }
  }
  otxt.onblur=function(){
    if(this.value==""){
      this.value="輸入搜尋關鍵字";
    }
  }
}
</script>
</head>
<body>
<input id="txt" type="text" value="輸入搜尋關鍵字"/>
</body>
</html>

程式碼實現預期目標，程式碼非常的簡單不多介紹。

相關文章