JS+CSS实现增加表单可用性之提示文字

传统表单提示文字实现方式

在设计表单时，通常会添加提示文字以辅助用户操作。例如在搜索框中显示“请输入关键字”，并在输入框获得或失去焦点时动态控制其显隐。传统做法是直接修改input的value属性来实现这一效果。

 
<form id="search">
<input type="text" id="keyword" name="keyword" 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>

上述代码虽能实现功能，但存在结构不够清晰的问题。因为“请输入关键字”仅为视觉提示，并非实际提交的value值。这种处理方式在需要区分提示文字颜色（如灰色）与用户输入文字颜色（如黑色）时显得较为繁琐。

基于CSS定位的优化方案

下面介绍一种结合CSS的更优实现方案：

 
<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">请输入关键字</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("请输入关键字");
return false;
} 
return true;
} 
</script>

尽管此方案增加了CSS和JavaScript的代码量，但HTML结构更加合理。通过引入label标签并利用CSS的position属性进行定位显示提示文字，使得input的value保持纯净。这种方式更易于控制提示文字与用户输入文字的样式差异（如颜色深浅），从而有效提升了表单的可用性。