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

Posted 2023-03-06

【中文标题】Firefox 锚点内的输入框中没有文本选择

【英文标题】：No text selection in input box inside anchor in Firefox

【发布时间】：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 方控件时，可能会出现这种情况（事实上，在我的情况下），所以我想知道是不是可能会以某种方式影响这种行为，也许社区可以帮助找到解决方案。

【参考方案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（示例）函数