Firefox 锚点内的输入框中没有文本选择答案

【问题标题】：No text selection in input box inside anchor in FirefoxFirefox 锚点内的输入框中没有文本选择
【发布时间】：2014-01-12 19:15:47
【问题描述】：

如果文本输入标记放置在锚点内，那么在 Firefox（在 Windows 上）中，无法在文本框内操作文本 - 文本光标不会改变其位置，并且无法选择文本。在 Chrome 中，您可以更改光标位置，但不能选择文本。

在某些情况下，我们可以将父级设置为锚点之外的其他东西，但有没有办法在一般情况下避免这种行为？

这是 HTML 代码：

<p>No text select in FF:</p>
<a href="#">
   <input type="text" value="7777" />
</a>

<p>Working text select in FF:</p>
<span>
   <input type="text" value="8888" />
</span>

还有fiddle。

【问题讨论】：

HTML 禁止嵌套交互式元素。如果您在锚点中有输入，则您没有 HTML。应该会出现破损。
我完全同意，而且我一点也不喜欢这一点——但是当结合 3rd 方控件时，可能会出现这种情况（事实上，在我的情况下），所以我想知道是不是可能会以某种方式影响这种行为，也许社区可以帮助找到解决方案。

标签： html google-chrome firefox textselection

【解决方案1】：

您可以在输入元素获得焦点时移除 href 属性。只要没有 href 属性，您就可以在输入字段内选择文本（在 safari、chrome 和 firefox 中测试）。

<a href="http://www.google.de" id="link">
  link
  <input type="text" id="input">
</a>

(function () {
  var link = document.getElementById('link');
  var input = document.getElementById('input');

  var saveHref = null;

  input.addEventListener('focusin', function () {
      savedHref = link.href;
      link.removeAttribute('href');
  });

  input.addEventListener('focusout', function () {
      link.href = savedHref;
      savedHref = null;
  });

})();

工作示例： http://codepen.io/jjd/pen/JYwLVr

【讨论】：

这是一个棘手问题的有趣解决方案。谢谢！

【解决方案2】：

这是因为浏览器中的实现错误。

实际上，当我们点击浏览器时，它会查找对象的类型这样 1.这是链接吗 2.这是任何其他类型（输入区域，图像，

为什么它首先检查类型“链接”

 because clickig is firstly implemented for opening links,   
 anf its main usage is for open links

它首先将其检测为链接，然后它将调用

。 openlink（示例）函数

【讨论】：