JS实现点击输入框提示消失效果

3星 · 超过75%的资源需积分: 12 126 浏览量更新于2024-09-11 收藏 2KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

本文档主要介绍了如何使用JavaScript实现在网页输入框中实现"文本框点击时文字消失，失去焦点时文字出现"的效果。这种常见的用户交互设计用于提供即时反馈，帮助用户理解当前输入状态。通过JavaScript，我们可以控制元素的行为，比如改变输入框的值。首先，作者引入了一个简单的JavaScript函数`addListener`，它接受三个参数：元素、事件类型和事件处理函数。这个函数用于添加事件监听器，兼容了`addEventListener`（适用于现代浏览器）和`attachEvent`（适用于IE浏览器）两种方法。这个功能对于确保跨浏览器兼容性至关重要。在提供的代码片段中，`myinput`是HTML中的一个`<input>`元素，其`id`属性为"myinput"。当用户点击这个输入框时，`click`事件触发，函数内部将`myinput`的值设置为空字符串，实现了提示文字的消失。当用户将焦点移出输入框，即`blur`事件触发时，函数恢复输入框的默认值"ID"，使得提示文字重新出现。 HTML部分展示了如何在页面中创建这个输入框，并通过`<script>`标签引入JavaScript代码。`<meta>`标签设置了文档字符集为GB2312，`<title>`标签定义了网页标题，与提示效果关联不大，但体现了文档的基本结构。这篇文档的核心知识点包括： 1. JavaScript事件处理机制：通过`addEventListener`或`attachEvent`添加事件监听器。 2. DOM操作：使用`document.getElementById`获取HTML元素，如`myinput`。 3. 动态修改元素内容：通过`value`属性控制输入框中的提示文字。 4. 用户界面交互：如何在用户行为（如点击、失去焦点）触发时执行特定操作。掌握这些基础技能后，开发者可以轻松地在自己的网页项目中实现类似的动态提示效果，提升用户体验。同时，这份代码片段也可以作为其他开发者的参考资料或库，便于快速集成到项目中。

资源详情

资源推荐

在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的，这个就是“文本框点击时文字消失，失去焦点时文字出现”这个效果；这个效果用个JS就可以完成，这个效果是做网站的人必备的JS代码；自己会写JS的写写也快，不会写的就需要代码收集以作备用，用到的时候就方便多了。

下面就是这个效果实现用到的JS代码：
程序代码

<script language="JavaScript" type="text/javascript">
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
}
}
var myinput = document.getElementById("myinput");
addListener(myinput,"click",function(){
myinput.value = "";
})
addListener(myinput,"blur",function(){
myinput.value = "请输入您的ID";
})
</script>

只要把这段代码保存成一个JS文件就可以的，在网页里做好引用就OK，轻松的完成这个给不会程序的人看起来很难的效果。
Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

下载后可阅读完整内容，剩余1页未读，立即下载