鼠标点击文本框后，里面的文字就消失，鼠标离开文本框后，里面的文字又会显示

最新推荐文章于 2025-05-11 14:31:28 发布
原创 最新推荐文章于 2025-05-11 14:31:28 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用HTML和JavaScript实现文本框默认提示信息的方法。当用户点击文本框时，预设的提示文字消失；当鼠标移出且文本框为空时，提示文字重新出现。这种效果常见于网站登录或搜索框的设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>鼠标点击文本框后，里面的文字就消失，鼠标离开文本框后，里面的文字又会显示</title>    
  </head>    
  <body>    
   <input name="key" type="text" id="key" value="关键词" size="30"    
          onmouseover=this.focus();this.select();   
          onclick="if(value==defaultValue){value='';this.style.color='#000'}"    
           onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />   
  </body>    
</html> 
文本框点击时文字消失失去焦点时文字出现
05-08
文本框点击时文字消失失去焦点时文字出现.txt文本框点击时文字消失失去焦点时文字出现.txt文本框点击时文字消失失去焦点时文字出现.txt
jQuery实现鼠标单击网页文字后在文本框显示的方法
10-24
标题所包含的知识点是“jQuery实现鼠标单击网页文字后在文本框显示的方法”，这意味着我们需要掌握jQuery库的使用，特别是关于如何处理鼠标点击事件以及如何在网页中动态显示或更新内容。描述部分进一步细化了知识点...
（Windows11）鼠标移动到Vscode文本区域消失，Vscode鼠标消失问题
最新发布
aschier的博客
05-11 509
在Windows 11专业版24H2-04系统中，使用VScode编写代码时，鼠标在文本区域消失的问题困扰了用户。经过多次尝试，包括删除插件、恢复设置和重装软件，问题仍未解决。最终，用户发现问题的根源在于鼠标指针的默认设置。通过更改鼠标指针样式，问题得以解决。此经历凸显了软件稳定性对用户体验的重要性，并呼吁开发者确保产品的稳定性，以避免给用户带来不必要的困扰。
鼠标点击文本框后，里面的文字就消失，鼠标离开文本框后，里面的文字又会显示...
web开发
02-02 572
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
鼠标点击文本框内文字就消失
ganlangreen的专栏
09-24 1471
鼠标点击文本框后，里面的文字就消失或全选中 鼠标点击文字消失： 鼠标点击文字选中：
鼠标在文本上移动时层的显示与消失
流氓地带
07-11 796
把这里的所有代码都放在与之间即可 javascript> function hiddiv() { document.all.ab.style.display="none" } function showdiv() { document.all.ab.style.display="" document.all.ab.style.left=window.event.clientX+15 documen
js实现鼠标点击文本框自动选中内容的方法
10-23
标题中提及的"js实现鼠标点击文本框自动选中内容的方法"主要涉及到的是JavaScript编程语言中的两个概念：鼠标点击事件（onClick）和文本选择事件（select）。在Web开发中，页面上的文本框（input type="text"）或者...
基于JQuery实现鼠标点击文本框显示隐藏提示文本
10-28
基于JQuery实现鼠标点击文本框显示隐藏提示文本的功能，是前端开发中的一个常见需求。 要实现上述功能，可以利用JavaScript和JQuery。JQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件...
鼠标焦点离开文本框时验证的js代码
10-27
本文所关注的是一个特定场景——在用户填写完毕并试图离开一个文本框（例如，通过鼠标点击其他地方或使用Tab键切换焦点）时，对文本框中的数据进行验证。 在给出的示例代码中，我们使用了HTML和JavaScript结合的...
文本编辑框鼠标丢失问题
05-09 7206
今天遇到一个非常奇怪的事情，所有的文本编辑框，鼠标都丢失了，非常影响阅读代码。现象如下：当鼠标移动带文本框内，鼠标箭头就不见了。通过研究，发现在系统的鼠标配置里面修改一下文本鼠标样式可以解决这个问题：控制面板===》鼠标==》指针==》选定文本==》更换为箭头修改之后，在把鼠标放进文本框里面，就会出现一个金黄色的鼠标箭头。...
鼠标选中文本框，默认内容消失
11-12
鼠标选中文本框，默认内容消失，没有新内容输入的时候，鼠标点击文本框以为的区域默认内容重新显示。
js实现input文本框点击时文字消失，失去焦点时文字出现
u011425213的专栏
08-08 1560
另一种 此功能主要是给用户在搜索输入关键字的时候，给用户一个友好的提示。很实用的代码，主要是onclick(点击)和onblur(失去焦点)两个事件.具体代码如下：(注意：js代码要放到页面的最下面)                   function addListener(element,e,fn){    if(e
jQuery实现判空 点击文本框时，文字消失 离开文本框时，输入信息改回请输入账号
m0_51701478的博客
12-24 519
jQuery实现判空 点击文本框时，文字消失 离开文本框时输入信息改回请输入邮箱地址 1.首先添加两个TetxBox控件和一个登录按钮 2.在这里要引入js 3.js代码实现 4.运行展示 5.实现效果（当鼠标点击文本框，文本框文字消失，鼠标离开文字出现） ...
鼠标点击文本框后，里面的文字就消失或全选中
baodaotui4761的博客
04-12 1022
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标点击文本框后，里面的文字就消失或全选中</title> </head> &l...
点击input文本框，文字消失 JS
weixin_34372728的博客
01-08 1239
&lt;HTML&gt; &lt;HEAD&gt; &lt;title&gt;点击input文本框，文字消失&lt;/title&gt; &lt;script type="text/javascript"&gt; //得到焦点触发事件 function OnfocusFun(element,elementvalue) { if(element.value...
鼠标点击文本框文字消失
it3361264的博客
08-20 546
鼠标点击文字消失：   鼠标点击文字消失： &lt;input name="textfield" style="color:#CCC;" type="text" value="点击文字消失" size="12" onClick="value='';focus()" /&gt;  鼠标点击文字选中：   &lt;input name="te
文本框中鼠标点击，文字消失
林中明月间丶
03-06 3208
&lt;input name="textfield" type="text" value="点击文字消失" onfocus="if (value =='点击文字消失'){value =''}" onblur="if (value ==''){value='点击文字消失'}" /&gt;
js写一个文本框添加提示文本，当单击文本框，里面的默认提示文字会隐藏，鼠标指针离开文本框，里面的文字会显示出来
10-13
在JavaScript中，你可以使用`addEventListener`来监听文本框的点击和鼠标移入/移出事件，实现这样的功能...鼠标离开文本框且输入框未有值时，提示又会显示；再次鼠标移动到输入框内，如果输入了内容，提示将再次隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值