admin管理员组

文章数量:1432187

I want blur select menu when it is open. I have made a small function when you hover the mouse on a tag then blur function will call. It is working fine in other browser but not working in Chrome. fiddle

Reproduce bug : click and open select menu and hover anchor tag, open select menu should be closed

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   $('a').hover(function(){
    $('select').blur();
   })
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>

I want blur select menu when it is open. I have made a small function when you hover the mouse on a tag then blur function will call. It is working fine in other browser but not working in Chrome. fiddle

Reproduce bug : click and open select menu and hover anchor tag, open select menu should be closed

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   $('a').hover(function(){
    $('select').blur();
   })
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>
  • javascript
  • jquery
Share Improve this question edited Feb 2, 2023 at 17:49 isherwood 61.2k16 gold badges122 silver badges170 bronze badges asked May 22, 2013 at 11:32 JitenderJitender 7,98932 gold badges116 silver badges218 bronze badges 4
  • stackoverflow./questions/10851882/… - the second answer here seems to deal with the chrome issue – Smern Commented May 22, 2013 at 11:37
  • @amit .. Can you explain what you are trying to achieve with .blur() ? – Adil Shaikh Commented May 22, 2013 at 11:45
  • put focus on it first – Pinch Commented May 24, 2013 at 15:09
  • its a behaviour of chrome – Rohit Agrawal Commented May 24, 2013 at 15:17
Add a ment  | 

2 Answers 2

Reset to default 3

I had the same problem, and the idea was clear: you cannot blur an opened select element, because Chrome and Safari waits for the answer. BUT there is a workaround that you may find acceptable.

First, you cannot set focus to another element while the "select" is still active, so I have removed it by applying a "display:none". After that I trigger a click event on another harmless element. And then I re-add the select back, by setting a display:block. In this case, the code would look like(i will add a span to click on):

.......
<select>
<option>Test</option>
......
</select>
<a href="#">hover me</a>
<span class="clickable">element clicked</span>
.......
<script type="text/javascript">
$(document).ready(function (){
    jQuery("a").mouseenter(function (){
        $("select").css({'display':'none'});
        $("span.clickable").focus().click();
        $("select").css({'display':'block'});
    });    
});
</script>

You need to use .trigger() for that

<select id="selectboxId">
.......
</select>

   $ ('#selectboxId').trigger('blur');

本文标签： javascriptBlur is not working for select menu on ChromeStack Overflow

版权声明：本文标题：javascript - Blur is not working for select menu on Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745586874a2664960.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。