html在表单左上角显示文字,js+css实现增加表单可用性之提示文字
平常設計表單的時候，我們會加入一些提示文字，比如說在搜索框里，我們會提示“請輸入關鍵字”，并在搜索框得到焦點和失去焦點的時候適時的隱藏和顯示，最常見的做法是利用value來設置：
搜索
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;
}
如此的代碼雖然實現(xiàn)了我們要的功能，但卻不干凈，原因在于“請輸入關鍵字”這樣的文本僅僅是提示文字而已，而不是value，雖然技術上沒有大問題，但很多時候還是顯得麻煩，比如說我們可能像讓提示文字顯示的顏色是灰色，而用戶鍵入的文本則顯示黑色。
下面看看如何利用css來實現(xiàn)更好的方式：
#wrapper { position: relative; display: inline; }
#description { position: absolute; left: 1px; color: #999999; display: none; }
請輸入關鍵字
搜索
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;
}
這樣的實現(xiàn)方式雖然CSS，JS代碼都多了一些，但是結(jié)構更合理，通過引入label來顯示提示文字(通過CSS的position屬性定位)，讓value本身更單純，而且提示文字和用戶輸入的文本在樣式更容易控制，比如顏色的深淺，從而提高表單可用性。
總結(jié)
以上是生活随笔為你收集整理的html在表单左上角显示文字,js+css实现增加表单可用性之提示文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html body background
- 下一篇： layui js添加html,layui