js實現文字框提示程式碼例項

antzone發表於2017-03-26
JS

文字框是用來輸入文字之用的，面對一個陌生的網站，可能會對文字框要輸入何種內容存在疑惑，如果文字框在預設狀態下能夠提供一定的提示就人性化很多，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.in_search{ 
  border:1 none; 
  color:#999999; 
  font-size:12px; 
  height:15px; 
  line-height:15px; 
  width:180px; 
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onfocus=function(){
    if(this.value=='請輸入搜尋關鍵字'){
      this.value='';
   }
  }
  otxt.onblur=function(){
    if(this.value==''){
      this.value='請輸入搜尋關鍵字';
    }
  }
}
</script>
</head>
<body>
<input id="txt" class="in_search" type="text" value="請輸入搜尋關鍵字"/> 
</body>
</html>

上面你的程式碼實現了簡單的提示功能，程式碼非常的簡單，這裡不多介紹了，更多可以參閱相關閱讀。

相關閱讀:

1.onfocus事件可以參閱javascript focus 事件一章節。

2.onblur事件可以參閱javascript blur 事件一章節。

相關文章