文本框获得焦点清空文本内容

最新推荐文章于 2022-09-19 09:32:04 发布
最新推荐文章于 2022-09-19 09:32:04 发布
阅读量7.9k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cg20/article/details/78213692

有时我们在设计网页的时候，可能会遇到这种情况。

当鼠标移到文本框里面或是鼠标放到文本框上面时，文本框里面默认的内容清除，当鼠标离开文本框而里面没有内容的时候，又还原成默认的内容。

小编以前看到别人写了一大堆代码，又是if又是else的，其实很简单就能实现，如下代码

鼠标移到文本框内(onfocus)获得焦点时清空文本内容 

<input value="请输入关键词搜索" onfocus="if(this.value==this.defaultValue){this.value=''}" onblur="if(this.value==''){this.value=this.defaultValue}" name="Moble" type="text" />

鼠标移到文本框上方(onmouseover)获得焦点时清空文本内容 

<input value="请输入关键词搜索" onmouseover="if(this.value==this.defaultValue){this.value=''}" onblur="if(this.value==''){this.value=this.defaultValue}" onmouseout="if(this.value==''){this.value=this.defaultValue}" name="Moble" type="text" />

当文本框第一次获得焦点时,清空文本框中原有的内容
loujunqing的专栏
06-29 6493
如何让文本框内的提示信息在激活文本框时清空 解决思路：     当需要填写的文本框很多时，在每个文本框内写上提示信息是个不错的办法，但这样一来用户在填写该项时必须先把提示文本删掉，非常不方便。所以应该让文本框更人性化一点，在focus时检查当前值是否为文本框的默认值，是则清空，否则保持不变，而在blur时检查文本框的内容是否为空，是则重置为默认值，否则保持不变。 具体步骤： 1.设置文本框的默
在C#中遍历页面所有TextBox控件并清空其值的全面指南
最新发布
记录学习的过程
05-20 836
本文探讨了在ASP.NET WebForms和Windows Forms应用程序中批量清空TextBox控件的多种方法。首先介绍了ASP.NET WebForms中的基本递归遍历和LINQ简化方法，并展示了如何处理特定容器中的TextBox。接着，讨论了Windows Forms中的基本遍历方法和扩展方法的使用。文章还对比了不同方法的性能，并分析了不同场景下的适用性。此外，还介绍了处理特殊情况（如排除某些TextBox不清空和异步清空）的高级主题，并提供了流程图以帮助理解清空处理流程。最后，提出了性能优化和
当某个文本框成为焦点时即清除文本框内容
12-10
代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>成为焦点时清除文本框内容</title> [removed] [removed] = initAll; function initAll(){ var clearText = document.getElementsByTagName(“input”); for (var i=0; i<clearText.length; i++){ clearText[i].onfocus = function ( ){ this.value = “”; } } } </s
文本框特效:获取焦点时自动清除默认文本 失去焦点重新显示默认文字
weixin_34320159的博客
04-13 723
代码 &lt;input style="background-image:url(input.gif);background-repeat:no-repeat;padding-left:46px;" type='text' name='keyword' size='23' value='输入关键字' maxlength='50' onfocus="if(this.value='输入关键字')th...
文本框得到焦点，并清空文本框内容
weixin_33767813的博客
06-22 1243
第一种、得到焦点，并清空文本框内容 <script> function cls(){ //捕获触发事件的对象，并设置为以下语句的默认对象 with(event.srcElement) //如果当前值为默认值，则清空 if(value==defaultValue) value="" } function res(){ //捕获触发事件的对象，并...
文本框得到焦点後，清空内容，失去焦点，还原成默认值
xiandy的专栏
04-17 2780
在网络应用中有时候，我们需要提醒用户输入文本框的值。来确保用户输入的正确性，我们可以使用JavaScript 来解决这个问题，例如需要用户输入昵称： 名称(*)因为有时，一些用户会临时因有事忘记输入。当 文本框的值为空时，我们还要继续提示。以确保用户输入的有效性！将代码插入： value="请输入您的昵称..." onfocus="if (value ==请输入您的昵称...){val
文本框获得焦点清空value的插件
04-13
"文本框获得焦点清空value的插件"就是为了实现这一功能而创建的工具。 这篇博客文章（https://helldancer.iteye.com/blog/1723140）可能详细介绍了如何使用这个插件或者源码来实现这一效果。源码的使用对于开发者来...
文本框获得焦点和失去焦点的判断代码
12-09
在获得焦点时，文本框前的标签文本清空；失去焦点时，若文本框内容为空，则恢复标签文本。 除此之外，还有示例代码展示了如何在JavaScript中处理`onFocus`和`onBlur`事件，以确保文本框的初始提示文字在用户交互时...
搜索文本框焦点离开时文本位置跳动问题解决方法
09-22
本文将介绍搜索文本框焦点离开时文本位置跳动问题的解决方法，并提供相应的代码示例。 首先，要理解文本位置跳动问题的本质。当用户点击搜索文本框，开始输入文字后，再移开光标时，文本框内部的光标可能会导致文本...
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
10-21
虽然上述示例没有直接涉及到表单验证，但通过添加获得焦点清空和失去焦点赋值的功能，实际上是在用户界面层面提供了一种轻量级的输入验证。这种方式可以提示用户在特定字段中输入所需的信息，进而减少服务器端的验证...
form表单中输入框聚焦时清除错误提示
u013085212的博客
09-19 1552
form表单输入框必填校验，失焦校验，聚焦清除错误提示
easyui textbox失去焦点事件及获取文本框的内容
01-20
easyui textbox失去焦点事件及获取文本框的内容easyui textbox失去焦点事件及获取文本框的内容easyui textbox失去焦点事件及获取文本框的内容
python tkinter中点击回车清空Text，同时光标显示在0.0
dcyywin8的博客
10-23 5521
所遇问题： 当想要使用Text中的绑定事件回车清空Text中的内容时，总是先执行清空操作，再执行回车操作，这样每次Text其它内容都清空了，但还是会留下一个回车。   思路： 使用bind方法获取键盘的事件，当键盘事件（event）的keycode等于13时，触发事件。 新建一个线程作为被触发事件。 在线程中，使用time模块的sleep函数进行等待（等待Text中的回车事件结束），之...
js ----alert之后文本内容清空问题、文本框获得焦点问题
Krismile_的博客
04-30 2877
1.解决alert之后文本内容会清空的问题 当我们在检测完文本框的输入内容是否正确 跳出alert框之后，文本框的内容会被清空。这样的问题在于若你使用了类似onclick=“check（）”这样的而且是提交按钮，如下： <input type="submit" name="submit" id="submit" value="提交" onclick="check()" >...
通过js实现得到焦点时文本框清空,失去焦点时又显示默认文字，值发生改变时不再恢复默认文字?
wsk_123_123的专栏
07-30 3803
<input type="text" value="我是默认值" onblur="if(this.value==''){this.value='我是默认值'}" onfocus="if(this.value=='我是默认值'){this.value=''}"/>
html重置怎么清空内容,让text中内容清除
weixin_39844515的博客
05-30 2987
怎样让TEXT中的内容清除?我的意思是说 怎样可以 当光标移到到TEXT文本框中时.让里面原先Private Sub Text1_GotFocus() Text1.Text = "" End SubHTML中如何清除一个text中的数据function choose_delet() { document.getElementByName("access_port_na最简单的方法就是把text的文...
html文本框鼠标离开事件,html鼠标事件_文本框事件
weixin_33748493的博客
06-03 1886
该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天57号网络技术分享给大家介绍html鼠标事件，就是当前文本框获得焦点时，里面的原有文本清零。首先我们来看一看源代码运行后的效果图片：你也可以【点击预览】，看到我们真实的效果。下面是源代码，喜欢就支持一下吧：/p>Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
成为焦点时清楚文本框内容
weixin_43803985的博客
07-25 191
主要是文本框获得焦点事件通过onfocus事件来监听 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>成为焦点时清楚文本框内容</title> <script> function clearText(myText){ ...
在jQuery内，当文本框获得焦点时，清空文本框内容是怎么做到的，请告诉我
04-01
<think>嗯，用户问的是在jQuery中如何当文本框获得焦点时清空内容。我需要回忆一下jQuery的事件处理方法。首先，应该使用.focus()事件或者.on('focus', ...)来绑定获取焦点的事件。然后，在事件处理函数里，用.val('')来清空内容。 不过用户可能已经有一个默认值，比如“请输入文本”，所以可能需要在清空前检查当前的值是否是默认值，否则每次获得焦点都会清空，可能影响用户输入。例如，如果用户自己输入了内容，再次获得焦点时不应该被清空。这时候需要加一个条件判断，只有当当前的值等于默认值时，才执行清空操作。 另外，可能还需要处理当用户离开文本框时，如果内容为空，恢复默认值。这时候需要用到.blur()事件，同样需要条件判断。不过用户的问题只提到了获得焦点时清空，可能暂时不需要处理这部分，但或许可以提一下作为补充。 还要考虑事件绑定的时机，确保DOM加载完成后再绑定事件，所以应该把代码放在$(document).ready()或者简写的$(function(){...})里面。否则，如果元素还没加载，事件绑定会失败。 还有，选择器的正确性很重要，用户可能通过ID、类名或者其他属性来选择文本框，比如$('#username')或者$('input[type="text"]')。需要确保选择器能准确找到目标元素。 另外，是否需要防止事件冒泡或者默认行为？一般情况下不需要，但如果页面有其他事件处理程序可能会干扰，可能需要使用event.preventDefault()，但这种情况比较少见。 最后，应该给出示例代码，并分情况说明，比如有默认值和无默认值的处理方式。同时提醒用户注意选择器是否正确，代码执行时机等问题。可能还需要提到兼容性问题，比如移动端或不同浏览器的表现，但jQuery通常已经处理好了这些差异，所以可能不用太强调。</think>以下是在jQuery中实现文本框获得焦点时清空内容的完整解决方案，包含多种场景的实现方式和注意事项： --- ### 一、基础实现原理 #### 1. **核心事件绑定** ```javascript // 使用 focus 事件监听 $("#targetInput").on("focus", function() { $(this).val(""); // ✅清空当前输入框内容 }); ``` #### 2. **带默认值的智能清空** ```javascript $("#searchBox").on("focus", function() { const defaultValue = "请输入关键词"; if ($(this).val() === defaultValue) { // 仅在值为默认时清空 $(this).val(""); } }); ``` --- ### 二、进阶场景实现 #### 场景1：带条件判断的清空 ```javascript $("#ageInput").on("focus", function() { // 当输入内容为0时清空 if ($(this).val() === "0") { $(this).val(""); } }); ``` #### 场景2：批量处理同类输入框 ```javascript // 清空所有class为clearable的文本框 $(".clearable").on("focus", function() { $(this).val(""); }); ``` #### 场景3：联动清空操作 ```javascript // 清空主输入框时同步清空子输入框 $("#mainInput").on("focus", function() { $(this).val(""); $("#subInput").val(""); // 联动清空 }); ``` --- ### 三、用户体验优化 #### 1. **保留历史记录功能** ```javascript let originalValue = ""; $("#commentInput").on({ focus: function() { originalValue = $(this).val(); if (originalValue === "说点什么...") { $(this).val(""); } }, blur: function() { if ($(this).val().trim() === "") { $(this).val(originalValue); } } }); ``` #### 2. **添加视觉反馈** ```javascript $("#emailInput").on("focus", function() { $(this).val("") .css("border-color", "#4CAF50") // 绿色边框 .addClass("active-field"); // 自定义CSS类 }); ``` --- ### 四、常见问题解决方案 #### 问题1：清空后无法恢复默认值 **修正方案：** ```javascript $("#phoneInput").data("default", "请输入手机号"); // 存储默认值 $("#phoneInput").on({ focus: function() { if ($(this).val() === $(this).data("default")) { $(this).val(""); } }, blur: function() { if ($(this).val().trim() === "") { $(this).val($(this).data("default")); } } }); ``` #### 问题2：移动端兼容性问题 ```javascript // 处理iOS虚拟键盘延迟 $("#mobileInput").on("touchstart", function() { const $this = $(this); setTimeout(function() { // ✅异步处理 if ($this.val() === "点击输入") { $this.val(""); } }, 100); }); ``` --- ### 五、最佳实践建议 1. **事件委托动态元素** ```javascript // 适用于动态生成的输入框 $(document).on("focus", ".dynamic-input", function() { $(this).val(""); }); ``` 2. **防抖处理高频操作** ```javascript // 防止快速切换焦点时的闪烁 let focusTimer; $("#fastInput").on("focus", function() { clearTimeout(focusTimer); focusTimer = setTimeout(() => { if ($(this).val() === "快速输入...") { $(this).val(""); } }, 50); }); ``` 3. **辅助功能优化** ```javascript // 为屏幕阅读器添加提示 $("#accessibilityInput").on("focus", function() { $(this).val("") .attr("aria-label", "内容已清空，请开始输入"); }); ``` --- ### 六、代码验证表格 | 测试场景 | 操作步骤 | 预期结果 | |-----------------------|----------------------------|-------------------------| | 初始默认值 | 查看页面加载状态 | 显示预设文本 | | 首次获得焦点 | 点击输入框 | 内容清空 | | 输入后再次获得焦点 | 输入内容后重新点击 | 保留已有内容 | | 失去焦点留空 | 清空内容后点击其他区域 | 恢复默认提示文本 | | 移动端触控测试 | 在手机端操作 | 正常清空无延迟 | --- 通过合理组合`focus`事件与值判断逻辑，可以实现智能化的文本框清空功能。建议根据实际业务需求选择基础清空或带状态保留的进阶方案，同时注意做好移动端适配和辅助功能优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值