0

我有一个问题，浏览器没有在空的必填输入字段上打开弹出窗口。

<input type="text" class="form-control" id="tokenfield" value="" required/>

尝试搜索互联网，但找不到解决方案。

这是问题的一个工作示例：http: //jsfiddle.net/rns3hang/182/

如果我从该示例中删除所有 js，则会打开浏览器默认的“请填写此字段”弹出窗口。

有针对这个的解决方法吗？

4

1 回答 1

1

有趣的问题。如果您尝试调试，您​​将看到您的表单提交处理程序根本没有被调用。这是因为，在幕后，您的令牌字段实际上是在构建自己的输入：

<div class="tokenfield form-control">
  <input type="text" class="form-control" id="tokenfield" value="" required="" tabindex="-1" style="position: absolute;left: -10000px;">
  <input type="text" tabindex="-1" style="position: absolute; left: -10000px;"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible">9 results are available, use up and down arrow keys to navigate.</span>
  <input type="text" class="token-input ui-autocomplete-input" autocomplete="off" placeholder="" id="tokenfield-tokenfield"
  tabindex="0" style="min-width: 60px; width: 640px;">
</div>

您可能会看到，您的初始#tokenfield 输入向左移动了 10k 像素，因此您看不到它。因此，当您单击提交时，HTML5 验证确实发生了，但在您不再使用的元素上。（只需尝试在#tokeninput 上删除所有额外添加的CSS）

至于解决方案，如果您真的需要坚持使用tokenfield，请在构建自定义表单提交逻辑时尝试使用它自己的事件和验证。

于 2017-10-29T16:19:54.857 回答