`

文本框点击时文字消失，失去焦点时文字出现

HTML 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
<title>文本框点击时文字消失，失去焦点时文字出现 练习 by 阿会楠</title>

</head>
<body>
<input type="text" value="请输入您的姓名" id="myinput" />
</body>
</html>
<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 = "请输入您的姓名";
})

</script>

分享到：
| 输入框提示列表效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文本框点击时文字消失失去焦点时文字出现

    ### 文本框点击时文字消失失去焦点时文字出现 #### 背景介绍 在Web开发中，用户体验是至关重要的一个方面。一个优秀的用户界面能够极大地提升用户的满意度和产品的竞争力。其中，表单元素（如文本框）的设计与交互...

    js实现input文本框点击时文字消失，失去焦点时文字出现

    在JavaScript编程中，有时我们需要为输入框（input）设置一种特殊的行为，比如当用户点击输入框时，预设的文字消失，而当用户离开输入框（失去焦点）时，这些文字又重新出现。这种功能常见于搜索框或者密码输入等...

    js实现input文本框点击时文字消失，失去焦点

    通过上述代码和解析，我们可以清晰地了解到如何使用JavaScript实现`input`文本框点击时文字消失，失去焦点时文字重新出现的功能。这种技术不仅增强了网站的交互性和可用性，也为用户提供了更加直观的操作指南。...

    jQuery实现文本框获得焦点文字消失

    在这个特定的场景中，我们关注的是如何使用jQuery来实现一个功能：当文本框（input[type="text"]）获取焦点时，其预设的文字自动消失，而当失去焦点时，文字又能重新出现。这个功能常见于搜索框或表单输入，以引导...

    文本框聚焦提示文字消失失，去焦点显示提示文字

    而当文本框失去焦点（用户点击其他地方或切换到其他文本框）时，提示文字又应该重新出现。这种交互方式提高了用户体验，因为它在需要时为用户提供指导，同时在用户开始输入时不会干扰视线。 在Web开发中，我们通常...

    文本框显示描述文字

    4. 添加事件监听：当文本框获取焦点或失去焦点时，动态改变提示文字的显示状态。 5. 测试与调试：在不同浏览器和设备上测试，确保兼容性和功能的正确性。 通过学习和实践这些步骤，开发者可以有效地在网页的文本框...

    文本框失去焦点问题

    文本框焦点问题解答，没有基础的看着费劲 TextBox组件[2]（文本框组件）是一种常用的，也是比较容易掌握的组件。应用程序主要使用它来接收使用者于输入文字信息。 当我们使用Visual Basic .Net集成开发环境开发...

    jquery文本框显示描述文字rar

    然后，当文本框失去焦点（用户点击其他地方）或内容改变时，如果发现内容仍然是默认文本，我们会将其清空，让用户知道他们需要输入自己的内容。 这种实现方式的一个优点是，用户可以看到更明显的提示，并有足够的...

    用JS来实现输入框提示文字点击时消失

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

    js如何实现点击标签文字，文字在文本框出现

    其中，实现点击某个标签后，让标签中的文字出现在文本框中是一个非常实用的功能，它能够提高用户的交互体验。下面将详细介绍使用JavaScript实现这一功能的几种方法。 ### 第一种方法：点击标签文字，文字在文本框...

    asp.net后台实现文本框提示文字

    通过以上步骤，我们就实现了ASP.NET后台控制文本框提示文字的功能，使得提示文字在鼠标点击时消失，鼠标离开后重新出现，且提示文字为灰色，输入文本时为黑色字体。这种方法不仅提高了用户体验，而且代码结构清晰，...

    C#文本框输入提示功能

    当文本框失去焦点且内容为空时，显示提示文本；反之，当文本框获得焦点时，如果之前显示了提示文本，则将其清除。 ```csharp protected override void OnGotFocus(RoutedEventArgs e) { base.OnGotFocus(e); if ...

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

    当用户点击输入框时，提示文字会自动消失，而当输入框失去焦点时，如果用户没有输入任何内容，提示文字又会重新出现，这样可以提醒用户输入正确的信息。这种效果可以大大提升用户体验。 在技术实现上，我们主要利用...

    js显示文本框提示文字的方法

    紧接着，我们通过JavaScript脚本来实现当用户点击文本框时，提示文字消失，并且文本框获得焦点的样式变化。当文本框失去焦点且用户未输入任何信息时，提示文字则会重新出现，并且文本框的样式恢复到默认状态。 具体...

    当某个文本框成为焦点时即清除文本框内容

    在网页设计中，有时我们需要实现一个功能：当用户点击或触摸到某个文本...在实际开发中，还可以根据需求进行扩展，比如添加多个事件（如`onblur`，在失去焦点时恢复预设文字），或者封装成一个可复用的函数或组件。

    用jquery实现输入框获取焦点消失文字

    我们在登录网站的时候，文本框中经常会有提示你输入的信息，当你点击文本框，提示信息自动消失，当文本框什么都没有，而且失去焦点的时候，又有了提示文字。 1.原型开发，先做一个简单的： 我们首先需要一个html文件...

    C#文本框输入提示功能 下拉框

    首先设置`Text`属性为提示信息，在文本框获得焦点时清空`Text`，失去焦点时如果`Text`为空则重新显示提示信息。 ```csharp private void textBox_GotFocus(object sender, EventArgs e) { if (textBox.Text == "请...

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    文章主要介绍了如何使用jQuery来实现当input输入框获得和失去焦点时，提示信息的显示和隐藏。首先，对于不熟悉jQuery的读者，需要理解jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过封装JavaScript常用的...

Magicbox
Global site tag (gtag.js) - Google Analytics