JS实现输入框默认提示与鼠标焦点交互

作者:纸飞机

时间:2026-10-28

浏览:129

本文介绍如何使用JavaScript实现输入框的默认提示功能。通过监听onfocus和onblur事件,当用户聚焦输入框时自动清空默认提示文本,当用户未输入内容且失去焦点时恢复默认值,提升表单用户体验。

文章目录

JS实现输入框默认提示与鼠标焦点交互

在Web开发中,常见一种输入框交互模式:例如网站注册页面的邮箱输入框,初始显示默认提示文本。当用户点击输入框获得焦点时,默认提示文本自动清除;若用户未输入任何内容便移开焦点,则重新显示默认提示值。该功能可通过JavaScript代码实现。



HTML结构代码如下:


具体代码示例如下:

 
<input type="text" id="email" name="email" class="txt_input" value="请输入经常使用的邮箱" onfocus="fn_focus(this);" onblur="fn_blur(this);"/>

对应的JavaScript处理逻辑如下:


具体代码示例如下:

 
function fn_focus(ele){
if(ele.value == ele.defaultValue){
ele.value = '';
} 
} 
function fn_blur(ele){
var reg = /^[\s]*$/;
if(reg.test(ele.value) || ele.value == ele.defaultValue){
ele.value = ele.defaultValue;
} 
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章