html - Firefox 中 anchor 内的输入框中没有文本选择

Question

如果将文本输入标签放置在 anchor 内，则在 Firefox(在 Windows 上)中无法操作文本框内的文本 — 文本光标不会改变其位置，并且无法选择文本。在 Chrome 中，您可以更改光标位置，但不能选择文本。

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

这是 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 .

Answer 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