设置input输入框的默认内容，获得焦点，内容消失

最新推荐文章于 2021-06-03 03:06:45 发布
原创 最新推荐文章于 2021-06-03 03:06:45 发布 · 4.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提及了原始操作和HTML5新操作，并展示了相应效果，聚焦于HTML5相关操作及呈现的结果，属于前端开发领域信息技术内容。

原始操作：

HTML5新操作：

效果：





uniapp - 手动设置 input / textare 输入框焦点并将光标移到末尾，也支持 uview 组件库 u-input 输入框 / u-textarea 文本域（全平台兼容的通用解决方案）
🏆 前端领域优质创作者
07-21 7758
uniapp小程序h5网页安卓苹果app设置input输入框textare多行输入框的焦点，uniapp设置输入框input焦点，uniapp手动实现让input文本框聚焦，uniapp如何让输入框input手动聚焦，uni-app输入框手动设置焦点，input手动获取焦点，uniappinput自动聚焦，uniapp每次手动让input输入框获取焦点，uniapp自动获取焦点并将光标移到末尾，uniapp给textarea多行文本框设置获取焦点，uniapp获取输入框焦点后怎么把光标移到最后，unia
jQuery表单Input文本框默认说明文字获得焦点后消失效果
hyshucom
01-31 271
法一： 加入以下jQuery代码 var txt=[]; var textbox=$('input:text'); textbox.each(function(){ txt.push($(this).val()); }); textbox.focus(function(){ $(this).val(""); }); textbox.blur(function(){ if($(this).val...
html输入框默认提示不消失,[Javascript]如何在HTML中实现点击input输入框（获得焦点）后默认提示消失的效果...
weixin_36183642的博客
06-03 835
在写HTML的时候经常会遇到输入框需要输入提示的情况，也就是点击文本框后提示内容自动消失。例如以下场景，是一个简单的默认提示：点击输入的时候十分麻烦，需要将提示删除才可以。如何HTML中实现点击input输入框(也就是获得焦点)后，准备输入的时候，让默认提示消失？代码如下：onfocus="if(value=='请输入用户名') {value=''}"onblur="if (value=='') ...
输入框默认值
08-03
加载js 可以简单的实现默认值加载 /** * @作者 shiqingsong * @时间 2012-7-13 * @功能 实现功能是初始化时文本框中默认值，当鼠标移入则清空默认值；但如果用户没有输入任何值，则还原默认值；提交时候如果是默认值则清空 * @描述 基于jquery 所以使用前必须导入jquery包 * @使用方法: 1,在需要设置默认值的标签加上 defaultCode="需要设置的默认值"; * 2,如果初始化时候需要现实默认值则需要在加载事件中调用函数：dc.innitDefaultCode(); 默认不显示 * 3,默认文本框中字体颜色为灰色,如果需要修改颜色则可以在调用页面重写defaultCode样式 * @例如: <input id="serachCode1" type="text" defaultCode(样式ID)="输入证件号码1" /> */
input 输入框默认获得焦点
weixin_34072857的博客
08-22 370
JavaScript实现默认焦点： 如下写&lt;body&gt;标签： &lt;body onload="window.formLogin.user.focus()"&gt; &lt;form name="formLogin" action="" method=""&gt; &lt;input type="text" name
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
10-27
本文将讨论如何使用jQuery来实现一个常见的功能：当`input`输入框获得焦点时隐藏默认文字，失去焦点且未输入内容时恢复默认文字。 首先，传统的实现方式是在HTML标签中直接内联JavaScript事件处理函数，例如`...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...
html文本框input表单输入框默认提示信息插件，获得焦点自动清空默认值，失去焦点对比确认默认值
12-02
当input失去焦点时 会判断输入值与默认值是否一致 如果一致（或空）则再次显示默认提示信息 若不一致（已输入信息）则input值为所输入值 3 此插件是jquery插件 调用方式为 $ "#xxx" autoTip ; 并可以指定...
文本框特效:获取焦点时自动清除默认文本 失去焦点重新显示默认文字
weixin_34320159的博客
04-13 735
代码 &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...
jquery实现输入框默认值
IT小生
05-26 5214
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>XXX</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="Java
WEB前端 input文本框 默认焦点
chanchaw的专栏
07-23 6142
打开WEB页面默认第一个text的input为默认焦点控件： var $inputs = $("input[type=text]"); $inputs[0].focus(event);  
获取焦点时，文本框中的内容消失，失去焦点时，显示内容（jquery）
weixin_42246997的博客
06-04 3504
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
input搜索框获取焦点时，placeholder消失
如果我年少有为不自卑
11-09 4016
/* 点击搜索框获取焦点 placeholder消失-开始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */ } /* Mozilla Firefox 4 ...
如何设置input默认值
热门推荐
No_overtime_apes的博客
02-01 2万+
之前聊过input最大字数限制，今天看下如何设置输入框默认值 placeholder属性 如下： &lt;input type="text" maxlength="11"  placeholder="名字"/&gt; 输入框展示效果如下： ...
【消除表单默认值】表单获得焦点后默认值消失
blueling51的专栏
11-11 3454
◇组件名称:     消除表单默认值 ◇功能描述：    表单获得焦点后默认值消失，失去焦点后默认值出现。 ◇调用方法：     addLoadEvent(stripeTables); ◇上下文情景：     很多表单都有默认值，用于提示输入内容。当表单获得焦点时，应该自动去除默默人内容，方便用户输入数据。当表单失去焦点时，如果表内没有内容，应重新设置表单内容为默认值。 ◇工作方式
如何让input输入框，自动失去焦点
最新发布
04-22
<think>好的，用户想实现HTML中input输入框自动失去焦点的方法。我需要先理解用户的需求，他们可能是在某些操作后希望输入框自动失去焦点，比如提交表单后或者完成输入后自动跳转到下一个字段。 首先，根据用户提供的引用，他们之前可能尝试过通过JavaScript来控制焦点的获取和失去。例如引用[1]中使用了jQuery在点击标签后显示输入框并获取焦点，失去焦点时隐藏输入框。引用[2]提到了在按钮点击时阻止默认事件以避免焦点丢失的问题。引用[3]是关于失去焦点时自动保存数据，引用[4]则是Vue中实现自动获取焦点和滚动到顶部。但用户现在的问题是如何让输入框自动失去焦点，而不是获取焦点。 我需要考虑几种实现方式。最常见的是调用输入框的blur()方法。比如通过JavaScript获取输入框元素，然后触发blur事件。用户可能已经知道这种方法，但需要确认是否正确以及是否有其他方式。 另外，可能要考虑事件触发的时机。比如在输入完成、点击某个按钮后，或者定时自动失去焦点。例如，在用户输入完成后，使用setTimeout延迟触发blur方法，以确保操作完成。 还需要注意浏览器兼容性和框架的影响。比如在React或Vue中可能需要使用refs来访问DOM元素。但用户的问题是关于HTML和原生JavaScript的，所以应聚焦于原生方法。 另外，用户提供的引用中，引用[2]提到通过阻止默认事件来保持焦点，但用户现在需要的是主动失去焦点，所以可能需要相反的操作，即触发blur而不是阻止它。 总结可能的实现方法： 1. 直接调用blur()方法。 2. 使用定时器延迟触发blur。 3. 通过其他事件触发，比如输入完成或按钮点击。 需要检查这些方法是否有效，并考虑可能的注意事项，比如异步操作、事件冒泡等。例如，在Vue中使用nextTick确保DOM更新后再触发，但原生情况下可能不需要。 另外，是否需要隐藏输入框？比如引用[1]中的例子在失去焦点后隐藏，但用户可能只需要失去焦点而不隐藏。需要明确用户的需求，但根据问题描述，用户只希望失去焦点，所以可能不需要隐藏。 最后，给出示例代码，说明如何在不同情况下触发自动失去焦点，并提醒可能的注意事项，比如确保元素正确获取、避免与其他事件冲突等。</think>以下是实现HTML input自动失去焦点的具体方法： ### 方法一：直接触发blur方法 ```javascript // 原生JS实现 document.getElementById('myInput').blur(); // jQuery实现 $('#myInput').blur(); ``` 原理：通过调用DOM元素的`blur()`方法强制解除焦点状态[^1][^2] ### 方法二：定时自动失焦 ```html <input type="text" id="autoBlurInput" onfocus="setTimeout(() => this.blur(), 2000)"> ``` 效果：获得焦点2秒后自动失焦，适用于需要限时输入的场景[^3] ### 方法三：事件触发失焦 ```javascript document.querySelector('.submit-btn').addEventListener('click', function() { document.getElementById('email').blur(); // 提交后解除焦点 }); ``` ### 方法四：输入完成后失焦 ```javascript document.getElementById('codeInput').addEventListener('input', function(e) { if(e.target.value.length >= 6){ // 输入6位验证码后自动失焦 this.blur(); } }); ``` ### 注意事项 1. 确保DOM加载完成后再操作元素 2. 移动端需注意虚拟键盘的显隐控制 3. 避免与`focus()`事件形成循环冲突 4. 框架中使用需通过refs访问元素（如Vue的`this.$refs.inputRef.blur()`）[^4]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值