文字框點選清除預設文字例項程式碼

admin發表於2017-03-19

比較人性化的文字框往往有這樣的設定，在預設狀態下，文字框內會有提示文字，比如"請輸入使用者名稱"等，但是當點選文字框，使文字框獲取焦點的時候，能夠清除文字框中的預設文字，下面通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

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

以上程式碼實現了我們的要求，當點選文字框的時候，能夠清除文字框中的預設文字，當焦點離開文字框的時候，會首先判斷文字框的內容是否為空，如果是則將文字的內容還原為預設提示文字，否則顯示輸入的內容，程式碼比較簡單這裡不多介紹了。

相關閱讀:

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

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

相關文章