`

DIV 获取焦点和失去焦点

    博客分类：
  • css
 
阅读更多

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>div 触发失去焦点事件</title>
</head>
<body>
<h1>设置tabindex属性可触发焦点事件</h1>
<div style="float:left;">

<div id="birthday__jQSelect0" class="dropdown" tabindex="0">
<li>测试一下 </li><li>测试一下 </li><li>测试一下 </li>
</div>

<script type="text/javascript">
document.getElementById('birthday__jQSelect0').onmouseover = function(){
document.getElementById('birthday__jQSelect0').focus();
return false;
}
document.getElementById('birthday__jQSelect0').onblur = function(){
alert("jjjjjj");
return false;
}
</script>


<iframe height="100" src="aa.html">
</iframe>
</body>
</html>

分享到：
| PDF 报表合并
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div失去焦点事件实现思路

    关键在于`popupDiv.focus()`，这一步确保了`div`能获得焦点。最后，我们给`div`绑定了`blur`事件，当`div`失去焦点时，会自动调用`popupDiv.hide()`，将`div`隐藏起来。 总结来说，实现`div`失去焦点事件的关键步骤...

    JavaScript 关于元素获取焦点(隐藏元素与div)

    ### JavaScript 关于元素获取焦点(隐藏元素与div) 在网页开发过程中，经常需要处理元素的焦点获取问题。本文将详细探讨两个重要的知识点：隐藏元素无法获取焦点以及如何让`div`等特殊元素获取焦点。 #### 隐藏元素...

    div+blur+event+angular2

    描述 "在无focus情况，触发blur事件" 暗示我们关注的是在 `&lt;div&gt;` 元素没有获得焦点的情况下，如何依然能捕获到 `blur` 事件。虽然通常 `&lt;div&gt;` 不会自动获取焦点，但可以通过编程方式给予其焦点，如使用 `document....

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    本文将讨论如何使用jQuery来实现一个常见的功能：当`input`输入框获得焦点时隐藏默认文字，失去焦点且未输入内容时恢复默认文字。 首先，传统的实现方式是在HTML标签中直接内联JavaScript事件处理函数，例如`...

    input获取焦点时底部菜单被顶上来问题的解决办法

    - 当`input`获得焦点时，将底部菜单的`position`改为`static`，使其不再固定在视口底部，而是跟随文档流移动，避免被键盘遮挡。 - 当`input`失去焦点时，将底部菜单的`position`改回`fixed`，并设置`bottom: 0`，...

    vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html： &lt;div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,&gt; {{item.labelName}} &lt;/div&gt; &lt;div ...

    获取焦点时,利用js定时器设定时间执行动作

    这些示例说明了如何结合获取焦点事件和定时器来动态控制元素的内容或者执行周期性的任务。在实际开发中，这些技巧可以帮助我们更好地管理页面的交互行为，提升用户体验。通过适当地使用定时器函数，可以实现如动画...

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex=-1 删掉（测试成功）: &lt;div id=myModal class=modal tabindex=-1 role=...

    jquery实现点击指定div外区域隐藏该div

    - `focus()` 方法：用于模拟输入框获得焦点的行为。 3. **事件冒泡与阻止** - `event.stopPropagation()`：阻止事件冒泡，即阻止事件继续向上级元素传播。 - `event.cancelBubble`：IE 浏览器中的属性，同样用于...

    Div滚动条随鼠标滚动js版（由网友JQuery版改写而成）

    3. **滚动位置计算**：在处理滚轮事件时，需要获取当前`div`的滚动位置，并根据滚轮的滚动方向和速度计算出新的滚动位置，然后使用`scrollTop`属性设置`div`的滚动位置。 4. **浏览器兼容性处理**：由于不同浏览器...

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    总结来说，wangEditor通过智能地处理Range和Selection，以及适配不同浏览器的差异，实现了即使编辑器失去焦点也能在原位置插入图片的功能。这种实现方式代码简洁，易于理解，且兼容性良好，是富文本编辑器开发中的一...

    Vue中div contenteditable 的光标定位方法

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 ... //解决ff不获取焦点无法定位问题 var ra

    JavaScript使用focus()设置焦点失败的解决方法

    4. 为了提高代码的兼容性和健壮性，可以为focus()方法设置适当的回退逻辑，比如在无法获得焦点时通过其他方式提示用户。 5. 对于老旧或特殊设备，可能需要查找该设备相关文档或社区来了解其特定的浏览器限制和bug，...

    js 失去焦点时关闭层实现代码

    这里定义了一个文本输入框和一个层（`div`元素），该层将在文本框获得焦点时显示，在文本框失去焦点时隐藏。 ```html &lt;div id="divUserName"&gt;这是一个层&lt;/div&gt; ``` ##### CSS样式设置 接下来是CSS样式设置部分，...

    JS在可编辑的div中的光标位置插入内容的方法

    - 要将内容插入到光标位置，首先要获得当前光标的Range对象，然后创建一个新的Range或DocumentFragment对象来代表要插入的内容。 - 使用Range对象的deleteContents()方法清除当前选中的内容，再使用insertNode()...

    jquery点击输入框时弹出div层复选框勾选输入的内容

    首先，监听输入框的`focus`事件，当输入框获取焦点时显示div层： ```javascript $(document).ready(function() { $('#inputField').on('focus', function() { $('#checkboxLayer').show(); }); }); ``` 然后，...

    Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...

    div+css布局中常用方法汇总.docx

    8. **禁止链接获取焦点**：`onfocus='this.blur()'`可以阻止链接获得焦点，从而避免其默认行为。 9. **模拟iframe滚动条**：通过设置`overflow:auto`，可以在一个div中创建类似iframe的滚动条。 10. **浮动和清除...

    详细总结Javascript中的焦点管理

    然而，为了让非表单元素如`&lt;div&gt;`、`&lt;span&gt;`等也能获取焦点，可以通过设置`tabIndex`属性来实现。例如，将`tabIndex`设为-1，然后通过调用`focus()`方法可以使非表单元素获得焦点。当元素获得焦点时，可以通过添加...

Magicbox
Global site tag (gtag.js) - Google Analytics