在输入焦点上打开引导下拉菜单

Posted 2023-03-12

【中文标题】在输入焦点上打开引导下拉菜单

【英文标题】：Open bootstrap dropdown on input focus

【发布时间】：2018-12-17 02:36:21

【问题描述】：

我有一个输入，当单击它时会显示一个引导程序 4 下拉列表，但我需要它在用户点击它时打开它以及 ADA 可访问性。

如果我使用一个使用 $('#input-name).dropdown('toggle') 的焦点事件，它可以正常工作，但是当单击输入时，焦点首先会触发，这会打开下拉列表，然后单击事件会关闭它.

我已经尝试过 e.preventDefault(); e.stopPropagation();但都无助于解决这个问题。

events: 
  focus #healthPlanMenu": "openDropDown"



openDropDown: function (e) 

  if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)'))
    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
   //fails

    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
    $( "#healthPlanMenu" ).click();//fails

  

【问题讨论】：

“当用户使用标签时我需要打开它”似乎是一种反模式，因为标签只是应该选择一个下拉列表，而不是打开它。您需要按 Enter 键才能打开它。巨大的下拉菜单打开，同时切换到表单上的其他元素会很烦人。如果熟悉标准下拉选项卡并按下回车的盲人会发生什么？ （如果已经打开，正常的下拉菜单将关闭）。

我理解您的意思，但在这种情况下，这是盲人用户的理想场景，也是此解决方案的用途。这是一个复杂的下拉菜单，但不是一个庞大的下拉菜单，必须选择计划和产品来帮助用户获得正确的结果。只选择一个计划将导致一个错误状态，该状态会为用户正确宣布和关注。

【参考方案1】：

因此，理想情况下，您可能会通过让focus 事件将下拉菜单的状态设置为打开来解决这个问题，这样如果点击事件“重新打开”它，没问题。但是，据我所知，jQuery API 只有一个 toggle 选项；似乎没有必要的限制......

鉴于此，我们可以通过使用mousedown 知道在我们的焦点事件之后是否有点击。所以解决这个问题的一个有点老套的方法是，如果我们知道点击即将到来，就禁用我们的焦点事件。

(function() 
	var disable = false;
	$('#healthPlanMenu.dropdown-toggle')
		.on('mousedown touchstart', function() 
			disable = true;
		)
		.on('focus', function() 
			if (!disable) 
				$(this).dropdown('toggle');
			
		)
		.on('mouseup touchend',function() 
			disable = false;
		)
)()

我不知道touchstart 和touchend 是否是必要的，因为大多数浏览器也可能在触摸时触发鼠标事件。但安全总比后悔好。