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

復制代碼 代碼如下:

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

復制代碼 代碼如下:

<style>
#wrapper { position: relative; display: inline; }
#description { position: absolute; left: 1px; color: #999999; display: none; }
</style>
<form>
<div>
<label for="keyword">請輸入關鍵字</label>
<input type="text">
</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("請輸入關鍵字");
return false;
}
return true;
}
</script>