开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js离开input框事件

在JavaScript中，当用户离开（即失焦）一个<input>元素时，可以使用blur事件来触发相应的处理函数。这个事件在用户点击输入框外部或者按下Tab键切换到下一个表单元素时触发。

基础概念

事件监听：在JavaScript中，可以为DOM元素添加事件监听器，以便在特定事件发生时执行代码。
blur事件：当元素失去焦点时触发的事件。

优势

即时反馈：可以在用户完成输入后立即进行验证或更新界面。
用户体验：通过即时响应用户的操作，可以提高应用程序的交互性和用户体验。

类型

内置事件：如blur、focus、click等。
自定义事件：开发者可以根据需要创建自定义事件。

应用场景

表单验证：在用户离开输入框时进行实时验证。
自动保存：在用户停止输入一段时间后自动保存内容。
界面更新：根据输入内容动态更新页面上的其他元素。

示例代码

以下是一个简单的示例，展示了如何在用户离开输入框时弹出一个警告框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Blur Event Example</title>
<script>
function onBlurFunction() {
    alert('Input lost focus!');
}
</script>
</head>
<body>

<input type="text" id="myInput" onblur="onBlurFunction()">

</body>
</html>

在这个例子中，当用户离开<input>元素时，onBlurFunction函数会被调用，并弹出一个警告框。

遇到的问题及解决方法

问题：为什么`blur`事件没有触发？

原因：可能是因为事件监听器没有正确绑定到元素上，或者是因为JavaScript代码中存在错误。
解决方法：
- 确保事件监听器已经正确添加到元素上。
- 使用浏览器的开发者工具检查控制台是否有错误信息。
- 如果是动态生成的元素，确保在元素生成后再绑定事件。

示例代码（动态绑定事件）

document.addEventListener('DOMContentLoaded', function() {
    var inputElement = document.getElementById('myInput');
    inputElement.addEventListener('blur', onBlurFunction);
});

function onBlurFunction() {
    alert('Input lost focus!');
}

在这个例子中，我们使用了DOMContentLoaded事件来确保DOM完全加载后再绑定blur事件。

通过以上信息，你应该能够理解blur事件的基础概念、优势、应用场景，以及如何解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

input输入框的input事件

首先是一个坑，在IE和360浏览器中页面刷新会执行一遍input事件，在其他浏览器就没有，所以会有很大问题，导致做的自动补全列表直接显示，刷新页面也不能隐藏。...input type="text" class="comHeaderBanSearchSearch fl" placeholder="请输入关键字查询" v-model="inputVal" @keyup.enter

3.6K3 0

【js】Input事件

Input Event常用事件触发的先后顺序如下： 1 keydown 2 keypress 3 textInput 4 input 5 keyup keydown，keyup 1 全部浏览器支持 2...Safari） 4 event.keyCode，返回键盘上按键对应的ASCII码（IE8-，Opera） textInput 1 IE9+，Chrome，Safari支持，别的浏览器不支持 2 在文本插入文本框之前触发...，便于检查拦截用户输入使用 3 在input:text，input:password，input:search，textarea以及元素是contentEditable模式时支持触发此事件 4 event.data...，返回用户输入的文本（如果按键是s，那么返回s；如果按键是s+Shift，那么返回S） 5 IE9中事件名为textinput（全小写，其它浏览器中I需要大写） input 1 IE9+，Firefox...，Chrome，Safari，Opera支持 2 在内容变化时，实时触发 3 在input:text，input:password，input:search，textarea支持触发此事件，在内容变化时

10.3K3 0

html文本框鼠标离开事件,html鼠标事件_文本框事件「建议收藏」

该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天57号网络技术分享给大家介绍html鼠标事件，就是当前文本框获得焦点时，里面的原有文本清零。...width:300px; height:40px; line-height:40px; float:left; text-align:center;} function cls(){ //捕获触发事件的对象...并设置为以下语句的默认对象 with(event.srcElement) //如果当前值为默认值，则清空 if(value==defaultValue) value=”” } function res(){ //捕获触发事件的对象

5.7K2 0

html 输入框输入事件,input输入框事件「建议收藏」

’,’value=’+event.target.value,’keyCode=’+event.keyCode) } 执行结果：其实这个过程并没有很意外，唯一感觉不太对劲的是 onchange 事件并不是每次输入框值改变的时候触发的...，而是在失去焦点时候，并且在 onblur 之前触发； 2、说说这些事件 onfocus 并没有什么特别的，就是当焦点转移到(点击，tab切换) input 框上边的时候触发； onkeydown 键盘按下的时候触发...，但是此时按下的值并没有被输入到 input ，所以，此时的 value 没有值，或者说它的值只能是之前的旧值另外，此时可以阻止按键的默认事件； onkeypress 按键在按下之后，并且是按键松开之前触发的...)； oninput 这个事件很贼，它的触发时机，从上面就可以看到，onpress 之后 onkeyup 之前；此时，已经可以拿到 value，不能拿到keycode，不可以阻止默认事件了；关键是这货明明是每次输入框的值变化时候出发的...，抢了onchange 的饭碗；另外，这东西是新的，IE9以下不支持，需要使用 onpropertychange；还有这货，仅仅在input， textarea 支持； onkeyup 按键在松开之后触发的

6.3K3 0

js 手动触发input事件

let evt = document.createEvent('HTMLEvents') evt.initEvent('input', true, true) $('#InputField').val

10.7K3 0

input获取焦点原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过 6.onclick...主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中 8.oninput...当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js给input...dom元素添加相应的事件， 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.8K6 0

element 输入框点击事件_ElementUI的input事件问题

最近用ElementUI的el-input组件，然后发现一个问题，就是我在输入框后，加一个icon的button，然后我希望这个输入框可以触发两个事件，第一个是，输入完，按键盘回车键的事件，第二个是...，输入完，点icon的button的click事件。...然后翻阅文档，发现可以给input加@change事件，这样按回车可以搜索，然后可以把icon的button写成slot的方式然后给button加@click事件，这样按钮也能搜索。...但是问题来了，我给input加了@change事件，但是他这个change很坑，因为他change事件里不光包含回车，居然还有失焦。。。...相关数据： 1.ElementUI el-input组件的事件 https://element.eleme.cn/#/zh… 2.我的相关代码如下： v-model=”str” size=”small”

3.6K2 0

input输入框change和blur事件区别

blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。...1、没有进行任何输入时，不会触发change 在这种情况下失焦后，输入框并不会触发change事件，但一定会触发blur事件。...在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。...2、输入后值并没有发生变更这种情况是指，在没有失焦的情况下，在输入框内进行的删除与输入操作，但最终的值与原值一样，这种情况下失焦后，keydown、input、keyup、blur都会触发，但change

3.9K1 0

input输入框禁用移动端调起键盘事件

要禁用移动端的软键盘弹出事件，可以使用 readonly 属性或 disabled 属性来设置输入框的状态。阻止移动设备上的软键盘弹出，同时仍然允许用户通过其他方式填充输入框。...以下是两种方法的示例：使用 readonly 属性： input type="text" readonly /> 通过将输入框设置为只读，移动设备上的软键盘将不会弹出。...问题：移动端事件input输入框日历组件滚动选择日期会有键盘弹出怎么在滚动选择时间的时候禁用键盘弹出在移动端的滚动选择组件中，如果你希望在滚动选择时禁用键盘弹出，可以尝试使用以下方法：...使用 input 元素的 readonly 属性：在滚动选择组件的输入框上添加 readonly 属性，这将阻止软键盘弹出，同时保持输入框可滚动选择： input type="text" readonly.../> 使用 input 元素的 onfocus 事件：在滚动选择组件的输入框上绑定 onfocus 事件处理程序，并在事件处理程序中将输入框的焦点立即转移，从而避免软键盘弹出： input type

1.7K3 0

js对input框的可编辑属性设置

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112370.html原文链接：https://javaforall.cn

8.3K5 0

input 事件

input 事件 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js 3.onchange...当input失去焦点并且它的value值发生变化时触发 4.onkeydown 在 input中有键按住的时候执行一些代码 5.onkeyup 在input中有键抬起的时候触发的事件，在此事件触发之前一定触发了...onkeydown事件 6.onclick 主要是用于 input type=button，当被点击时触发此事件 7.onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中...// 8.oninput 当input的value值发生变化时就会触发，不用等到失去焦点（与onchange的区别） input type="text" onfocus="a();" onblur

1.8K2 0

Vue多个input框接连focus,blur事件导致页面抖动

bug描述：Vant + Vue 技术需求：一个表格中有至少两条数据，每条数据都有input框，在失去焦点后需要展开表头，获取焦点时收回表头。　　...触发：在点击一个input框后接着点击另一个input框，使第一个input框的失去焦点为第二个input框的获得焦点，触发事件，会导致顶部表头先展开再收回，造成页面抖动。...e.relatedTarget || e.relatedTarget.className == 'el-input_inner') { this.

1.6K2 0

【整合】input标签JS改变Value事件处理方法

某人需要在时间控件给文本框赋值时，触发事件函数。实现的效果：　　1、文本框支持手工输入，通过用户输入修改值，手工输入结束后触发事件。...阻塞在于失去焦点后才触发（输入过程中不触发事件）　　2、通过JS方法修改值，修改后触发事件。...重点阻塞在于此（JS赋值要触发）　　最终采用方案：　　1、IE（IE8及以下）下使用onpropertychange实现JS赋值后触发事件　　2、需求是手工输入结束后才触发事件，避免在文本框实时输入文字的时候也因为...赋值文本框：input type="text" id="name"/> 总结对比在input标签中onchange...适用场景为：文本框输入过程中实时监听输入内容，触发事件 onpropertychange：IE中元素特有的属性，直接在底层监听元素的属性变化（不止是Value），任何变化都会触发事件，包括适用JS操作

12.2K5 0

IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）

在React项目中碰到了个问题，输入框绑定了input事件，在IE中初始化会自动执行，刚开始以为是只要有placeholder就会导致问题，后面网上搜了一轮，自己手撸了一下，总结了导致绑定的input事件自动执行的原因...1.输入框的值为空，2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变；还有就是input获得焦点时和失去焦点时，也会改变；但是改变前后都设置为空字符串则不算改变...) 出现问题的代码如下 var input = document.createElement('input'); input.placeholder = '3333';...，绑定完input事件之后，不能有placeholder的变化我的解决思路是，获得焦点时再去监听input事件，如果input变化时可能涉及到placeholder的变化(react里面会这样)，要同时去掉...placeholder；失去焦点时就取消监听input事件，同时恢复placeholder（如果获得焦点时有去掉）,核心代码如下： //input是dom节点 let listenCb

1.8K1 0

js 动态生成 input 的绑定事件 blur 无效

标签，要求设置失去焦点的blur事件需要实现的界面截图如下： ?...最开始编写的 js 代码如下： /** * 当sku库存量变化时，对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...{ var input_goods_stock = 0; $('.input-sku-stock').each(function () { input_goods_stock...+= Number($(this).val()); }); $(".input-goods_stock").val(input_goods_stock); })...，建议可自行测试动态生成input绑定事件无效如：blur 意见：异步导致绑定事件失败，需使用全局绑定事件 3.w3school 文档 - onblur 事件这就是官方文档

8.9K0 0

input 事件监听

1、change事件，在input失去焦点才会考虑触发，它的缺点是无法实时响应，与blur事件有着相似的功能，但与blur事件不同的是，change事件在输入框的值未改变时并不会触发，当输入框的值和上一次的值不同...，并且输入框失去焦点，就会触发change事件。...2、input事件，需要实时检测input输入框的值的时候，就需要用到h5的新事件:input事件了，input事件可以实现对input输入框值的实时监控，只要input输入框值发生改变就会触发，但因为是...h5的新事件，应此需要考虑兼容性问题，ie9以下的浏览器并没有实现这个事件， 3、propertychange事件，这个事件是在input的属性值发生改变时触发，而输入框的值就是input的value属性...propertychange事件实时触发，即每增加一个字符或者删除一个字符就会触发，通过js也会触发（任何属性改变），但是该事件为ie专有input是ie之外大多数浏览器支持的事件，在value改变时触发

4.6K2 0

js通过input框输入属性和值，改变div的属性

js实现在input框里面输入属性和值，页面的 div的属性根据输入的属性和值进行变化。 ? input元素的引用 oBtn[0].onclick = function () { //给确定按钮添加事件 changeStyle...oInput[1].value);//调用changeStyle函数 }; oBtn[1].onclick = function () { //给重置按钮添加事件处理...属性值：input type="text" value="" /> 确定重置在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。

15.8K5 0

input输入中文时，拼音触发input事件

在上一篇文章中写到了函数防抖，在使用函数防抖来进行搜索框优化的时候会遇到一个问题，就是监听文本输入框的input事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中时会触发input事件，会出现下图的效果...这是我们不希望看到的，我们希望得到的效果是汉字输入进去以后再触发事件。通过查询，我发现input有两个事件：compositionstart和compositionend。...来看一下关于两个事件的介绍： compositionstart：事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作...添加onkeyup事件，在该事件执行时判断flag是否为true，如果为true，则执行搜索。...下面来看代码示例 input id="txt" type="text"> var flag = true; $('#txt').on('compositionstart'

8.2K2 0

vue input输入框联想

最后是效果图，其实也挺简单的，主要是用了watch监控input输入值的变化，如果数据是请后端请求可以，先请求数据。... input...solid red; } li{ height:40px; line-height: 40px; border-bottom: 1px solid #ddd; } .bindingbtn input

2.6K5 0

jQuery判断input框的值

$("#date").change(function (e) { var time = $(this).val().match('满员...

2.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭