jquery - 必需的 HTML 选择元素并选择 : Browser hint position

Question

我有一个 HTML 表单，其中包含 <select>由 Chosen 1.4.2 拉皮条的元素现在也标记为 required (HTML 5 定义的新属性)。

如果提交表单时未选择任何内容，浏览器会显示选择值的提示。然而，既然原来<select>元素被 Chosen 取代，提示不是显示在选择控件的正下方，而是显示在屏幕的左上角 (Firefox) - 在我的情况下很容易错过 - 或 (MSIE、Opera) 完全不是。

有没有办法纠正这个问题，例如

• 通过让 Chosen 处理被替换的一些“验证”事件 <select>控制
• 通过保留被替换元素的原始位置，从而使浏览器提示出现在 Chosen 附近神器
• 还有其他可能性吗？

谢谢!

Answer 1

从 Chosen 1.5.0 开始，似乎仍然没有内置支持这种情况，但基于the discussion for issue 515和 this fiddle ，我创建了一个包含以下内容的 chosen-patch.js:

// "required" support for Chosen; see https://github.com/harvesthq/chosen/issues/515, http://jsfiddle.net/hq7b426j/1/
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function (options) {
  var select = $(this),
      is_creating_chosen = !!options;

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style');
  }

  var ret = select.oldChosen(options)

  // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
  if (is_creating_chosen && select.css('display') === 'none') {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style', 'display:visible; position:absolute; clip:rect(0,0,0,0)');
    select.attr('tabindex', -1);
  }
  return ret
}

我在包含 chosen.jquery[.min].js 之后以及激活它的代码之前包含此内容。我用 Chosen 1.5.0(jQuery 版本)和浏览器 Firefox、Opera 和 IE 11 进行了尝试。

必填选择控件周围没有红框，但提示已正确放置。