本文介绍如何使用JavaScript实现输入框的默认值提示效果。通过定义通用函数，监听onfocus和onblur事件，在用户获取焦点时清空提示文本，失去焦点且内容为空时恢复默认值。代码包含函数定义及遍历所有文本框批量应用的完整示例，适用于提升表单用户体验。
输入框默认值提示逻辑实现
例如：
搜索框：可以使用 <input value="搜索产品..." />
文本区域：可以使用 <textarea>输入您多我的建议或者意见,让我们的网站为您创造更便捷的服务....</textarea>
........
这种提示功能虽然直观且用户体验良好，但需要解决如何让用户在获取焦点时自动清空内容，以及在失去焦点且内容为空时重新显示提示文本的逻辑。
当页面中存在大量此类元素时，如何高效地进行统一管理和调用也是需要考虑的问题。
核心函数定义与参数说明
具体实现代码如下：
var inputText=function(o,e,e2){
if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}
}
new inputTextChange(o,e,e2,txt)
} 上述代码定义了一个核心函数。
功能说明：
参数 [o] ：代表需要操作的DOM对象。
参数 [e] ：代表触发清空对象值的事件名称。
参数 [e2] ：代表触发恢复默认值的事件名称。
函数调用示例：
inputText（userName,"onmouseover","onmouseout"）;
完整应用示例：
完整HTML与JS应用示例
代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input.value</title>
</head><body>
<script>
var inputText=function(o,e,e2){if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}}
new inputTextChange(o,e,e2,txt)
}
</script>
<input type="text" value="请输入您的邮箱..." on />
<input type="text" value="请输入您的家庭住址..." />
<input type="text" value="请输入您的手机号..." />
<script>
var inputArr=document.getElementsByTagName("input")
for(var i in inputArr){
if(!inputArr[i].type=="text") continue;
inputText(inputArr[i],"onfocus","onblur")
}
</script>
</body></html>