草庐IT

javascript - 谷歌浏览器 : Focus issue with the scrollbar

coder 2024-12-12 原文

我正在使用 jQuery 1.3.2。

表单中有一个输入字段。 单击输入字段会打开一个 div 作为下拉列表。 div 包含项目列表。由于列表很大，div 中有一个垂直滚动条。

要在外部单击时关闭下拉菜单，输入字段上有一个模糊事件。

现在的问题是:

在 chrome(2.0.172) 中，当我们点击滚动条时，输入框会失去焦点。 现在，如果您在外部单击，则下拉菜单不会关闭(因为当您单击滚动条时输入已经失去焦点)

在 Firefox(3.5)、IE(8)、opera(9.64)、safari() 中，当我们点击滚动条时，输入框不会失去焦点。因此，当您在外部单击时(单击滚动条后)，下拉菜单将关闭。这是预期的行为。

所以在 chrome 中单击滚动条后，如果我在外部单击，下拉菜单将不会关闭。 我该如何解决 chrome 的这个问题。

最佳答案

好吧，我在下拉控件中遇到了同样的问题。我已经就此问题询问过 Chrome 开发人员，他们说是 a bug这不会在最近的将来得到修复，因为“很多人都没有报告过，修复也不是微不足道的”。所以，让我们面对现实吧:这个错误至少会再存在一年。

不过，对于这种特殊情况(下拉列表)，有一个解决方法。诀窍是:当单击滚动条时，“鼠标按下”事件会到达该滚动条的所有者元素。我们可以使用这个事实来设置一个标志并在“onblur”处理程序中检查它。这里的解释:

<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
  <div id="dropdown_rows">
    <span>row 1</span>
    <span>row 2</span>
    <span>row 2</span>
  </div>
</div>

“dropdown_wrap”div 将获得一个垂直滚动条，因为它的内容不适合固定高度。一旦我们得到点击，我们就非常确定滚动条被点击并且焦点将被取消。现在一些代码如何处理这个:

search_ctrl.onfocus = function() {
  search_has_focus = true
}

search_ctrl.onblur = function() {
  search_has_focus = false
  if (!keep_focus) {
    // hide dropdown
  } else {
    keep_focus = false;
    search_ctrl.focus();
  }
}

dropdow_wrap.onclick = function() {
  if (isChrome()) {
    keep_focus = search_has_focus;
  }
}

就是这样。我们不需要对 FF 进行任何修改，因此会检查浏览器。在 Chrome 中，我们检测到滚动条上的点击，允许在不关闭列表的情况下模糊焦点，然后立即将焦点恢复到输入控件。当然，如果我们对“search_ctrl.onfocus”有一些逻辑，它也应该被修改。请注意，我们需要检查 search_ctrl 是否有焦点，以防止双击出现问题。

您可能会猜到更好的主意可能是取消 onblur 事件，但这在 Chrome 中不起作用。不确定这是错误还是功能。

附言“dropdown_wrap”不应有任何填充或边框，否则用户可能会点击此区域，我们会将其视为滚动条点击。

关于javascript - 谷歌浏览器 : Focus issue with the scrollbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1345473/

javascriptscrollbarsearchsectionsearch_ctrljquerycross-browsergoogle-chrome

有关javascript - 谷歌浏览器 : Focus issue with the scrollbar的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  3. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  4. ruby - 404 未找到，但可以从网络浏览器正常访问 - 2

    我在这方面尝试了很多URL，在我遇到这个特定的之前，它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT

  5. ruby - 如何在 watir 测试套件结束时关闭浏览器？ - 2

    使用ruby​​的watir测试网络应用程序时，浏览器最后会保持打开状态。网上的一些建议是，要进行真正的单元测试，您应该在每次测试时(在拆卸调用中)打开和关闭浏览器，但这很慢而且毫无意义。或者他们做这样的事情:defself.suites=superdefs.afterClass#Closebrowserenddefs.run(*args)superafterClassendsend但这会导致摘要输出不再显示(诸如“100次测试、100次断言、0次失败、0次错误”之类的内容仍应显示)。我怎样才能让ruby​​或watir在我的测试结束时关闭浏览器？ 最佳答案

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - Rails 使用 send_data 或 send_file 将多个文件发送到浏览器 - 2

    我正在尝试向浏览器发送多个文件。我不能像下面的代码一样为每条记录调用send_data，因为我收到双重渲染错误。根据thispost我需要创建文件并压缩它们，以便我可以在一个请求中发送它们。@records.eachdo|r|ActiveRecord::Base.include_root_in_json=true@json=r.to_jsona=ActiveSupport::MessageEncryptor.new(Rails.application.config.secret_token)@json_encrypted=a.encrypt_and_sign(@json)send_da

随机推荐