快捷導航

js+css實現(xiàn)增加表單可用性之提示文字

更新時間：2013年06月03日 14:53:37 作者：

平常設(shè)計表單的時候，我們會加入一些提示文字，最常見的做法是利用value來設(shè)置，下面與大家分享一個實例，感興趣的朋友可以參考下哈

平常設(shè)計表單的時候，我們會加入一些提示文字，比如說在搜索框里，我們會提示“請輸入關(guān)鍵字”，并在搜索框得到焦點和失去焦點的時候適時的隱藏和顯示，最常見的做法是利用value來設(shè)置：

 
<form id="search"> 
<input type="text" id="keyword" name="keyword" value="請輸入關(guān)鍵字"> 
<button>搜索</button> 
</form> 
<script> 
document.getElementById("keyword").onfocus = function() { 
if (document.getElementById("keyword").value == "請輸入關(guān)鍵字") { 
document.getElementById("keyword").value = ""; 
} 
} 
document.getElementById("keyword").onblur = function() { 
if (document.getElementById("keyword").value == "") { 
document.getElementById("keyword").value = "請輸入關(guān)鍵字"; 
} 
} 
document.getElementById("search").onsubmit = function() { 
var keyword = document.getElementById("keyword").value; 
if (keyword == "" || keyword == "請輸入關(guān)鍵字") { 
alert("請輸入關(guān)鍵字"); 
return false; 
} 
return true; 
} 
</script> 

如此的代碼雖然實現(xiàn)了我們要的功能，但卻不干凈，原因在于“請輸入關(guān)鍵字”這樣的文本僅僅是提示文字而已，而不是value，雖然技術(shù)上沒有大問題，但很多時候還是顯得麻煩，比如說我們可能像讓提示文字顯示的顏色是灰色，而用戶鍵入的文本則顯示黑色。
下面看看如何利用css來實現(xiàn)更好的方式：

復(fù)制代碼代碼如下:

 
<style> 
#wrapper { position: relative; display: inline; } 
#description { position: absolute; left: 1px; color: #999999; display: none; } 
</style> 
<form id="search"> 
<div id="wrapper"> 
<label for="keyword" id="description">請輸入關(guān)鍵字</label> 
<input type="text" id="keyword" name="keyword"> 
</div> 
<button>搜索</button> 
</form> 
<script> 
window.onload = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "inline"; 
} 
}; 
document.getElementById("keyword").onfocus = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "none"; 
} 
} 
document.getElementById("keyword").onblur = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "inline"; 
} 
} 
document.getElementById("search").onsubmit = function() { 
if (!document.getElementById("keyword").value) { 
alert("請輸入關(guān)鍵字"); 
return false; 
} 
return true; 
} 
</script> 