`
yixiandave
  • 浏览: 140818 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Div等元素onBlur的实现

    博客分类:
  • js
阅读更多
最近写一个dl元素,要求在blur后自行销毁,一直无法正常被调用

经过实验发现
onblur被调用一定要事先被focus
而元素可以被focus的前提就是tabindex属性需要被赋值,通常为0

所以,实现onblur事件响应需要添加tabindex属性并且在展示的时候调用focus()获取焦点

//重要!添加tabindex属性
var div = $("<div></div>").attr("tabindex",0);

div.blur(function(){
    div.slideUp("normal",function(){
        div.remove();
    });
});

//为div添加内容和样式

div.slideDown("normal");
//重要!获取焦点
div.focus();
0
3
分享到:
评论

相关推荐

    DIV的失去焦点(blur)实现方法

    在网页开发中,`div` 是一种常用的布局元素,它本身并不支持 `onblur` 事件,因为这个事件通常用于可聚焦元素(如输入框、按钮等)。然而,有时我们需要模拟 `div` 失去焦点时的行为,比如弹出的 `div` 在用户不再与...

    jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).docx

    ### jsp+ajax实现的局部刷新验证验证码(onblur事件触发验证) #### 技术背景与概念 在Web应用开发中,验证码(CAPTCHA)是一种常用的安全措施,用于区分用户是人类还是自动化软件。传统的表单提交方式在提交数据时...

    js实现编辑div节点名称的方法

    本文将深入讲解如何使用JavaScript来实现编辑`div`节点的名称。在给出的实例中,我们将关注如何编辑一个具有`id="noteTxt"`的`div`元素内的文本。 首先,HTML结构如下: ```html &lt;div class="img_1" id="img_1"&gt; ...

    html的DOM中Event对象onblur事件用法实例

    `onblur`事件可以应用于大多数与用户交互的HTML元素,包括但不限于`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等表单元素,以及`&lt;a&gt;`、`&lt;button&gt;`、`&lt;div&gt;`等非表单元素。它在表单验证、数据处理和用户体验优化等方面有着...

    实现div可编辑的常见方法总结

    以上两种方法均能有效地实现`&lt;div&gt;`元素的可编辑性。第一种方法利用了`&lt;textarea&gt;`标签,并通过JavaScript和CSS进行了高度定制;第二种方法则通过JavaScript动态地创建`&lt;input&gt;`元素并替换原始内容。这两种方法各有...

    layui动态绑定事件的方法

    对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件监听设置在静态的父级元素上,从而实现对动态添加元素的事件监听。 在实现的过程中,我们也可以利用ES6的模板字符串(`)来拼接要动态创建的...

    用javascript实现div可编辑的常见方法

    ### 用JavaScript实现DIV可编辑的常见方法 在现代Web开发中,使页面元素变得可编辑是一项非常实用的功能,它可以显著提升用户体验,并增加页面的互动性。本文将详细介绍两种常用的利用JavaScript实现DIV可编辑性的...

    js实现创建删除html元素小结

    &lt;div&gt;姓名:&lt;input id="name" type="text" onblur="InputOnBlur()" /&gt;&lt;span id="containers"&gt;&lt;/span&gt;&lt;/div&gt; ``` 对应的JavaScript函数`InputOnBlur()`会检查输入的姓名长度,如果不符合条件,将删除现有的消息元素...

    CSS对象教程检索下载

    在实际应用中,`DIV`元素的事件处理也非常重要,比如`onblur`事件发生在元素失去焦点时,`onclick`事件则响应用户点击行为,这些事件处理函数可以用来实现丰富的交互效果。通过结合CSS样式和JavaScript,开发者可以...

    js弹出div并显示遮罩层

    在讨论如何使用JavaScript弹出div并显示遮罩层之前,我们首先要理解几个核心概念:遮罩层的作用、如何使用JavaScript创建和控制DOM元素以及如何处理用户交互事件。 遮罩层通常被用于遮挡页面的一部分内容,从而达到...

    用tabIndex轻松实现网页导航

    通过设置`tabIndex`,我们可以让任何元素(包括那些原本不可通过tab键导航的元素,如`div`)参与tab键导航序列。 以下是一些关于`tabIndex`的重要知识点: 1. **支持范围**:`tabIndex`属性最早在IE 4.0版本中得到...

    javascript表单和事件PPT学习教案.pptx

    为了实现更复杂的表单验证,可以为其他表单字段(如密码和电子邮件)添加类似的验证逻辑,通过`onblur`事件监听用户操作,根据输入内容的合法性更新对应的错误提示`div`。 此外,页面内容的动态改变还可以通过改变...

    用Html+Js实现的“自动补全”功能.docx

    在示例中,选择了一个`&lt;div&gt;`包裹输入框和列表,并使用`&lt;input&gt;`作为输入框,而列表部分使用`&lt;div&gt;`内嵌`&lt;table&gt;`来实现。HTML代码如下: ```html &lt;div id="bodyDiv" name="bodyDiv" style="position: relative; ...

    纯JS实现表单验证实例

    这些样式通过内联CSS规则或外联CSS文件实现,提高了网页的视觉效果,使得表单元素在用户浏览时更加友好和吸引人。 最后,通过按钮元素()提供了提交(submit)和重置(reset)表单的选项。提交按钮用于将表单数据...

    用Html+Js实现的“自动补全”功能.pdf

    - 匹配结果可以通过JavaScript动态创建`&lt;li&gt;`或`&lt;tr&gt;`元素添加到列表容器中,展示给用户。 - 用户可以通过键盘的方向键上/下来浏览匹配项,回车键选择某一项。 4. **兼容性和优化**: - 为了确保功能在多个...

    用Html+Js实现的“自动补全”功能 (2).docx

    1. **initialize()函数**:页面加载完成后,首先隐藏列表,设置输入框和列表的宽度,然后获取元素引用并保存默认值。 ```javascript source = ['0123', '023', 123, 1234, 212, 214, '033333', '0352342', 1987, ...

Global site tag (gtag.js) - Google Analytics