實現文字框輸入內容提示程式碼例項

admin發表於2017-02-10

比較人性化的網站一般都是比較講究細節的，比如文字框輸入內容具有提示效果，在預設情況下，文字框有提示文字，當滑鼠放入文字框輸入文字的時候，提示文字會消失，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[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(otxt.value=="請輸入網站名稱"){
      otxt.value="";
    }
  }
  otxt.onblur=function(){
    if(otxt.value==""){
      otxt.value="請輸入網站名稱";
    }
  }
} 
</script> 
</head> 
<body> 
<input type="text" id="txt" value="請輸入網站名稱"/>
</body> 
</html>

相關文章