我可以将搜索提示添加到html标记，以便浏览器的搜索按钮找到文本吗？

Question

我有一个电话列表。我格式化如下：555-123-4567。

用户不断尝试使用浏览器的搜索功能，但不要键入破折号，也不要复制粘贴没有短划线的电话号码。因此，在他们编辑并添加破折号之前，他们找不到他们正在寻找的文本。

这给他们的经历增添了一点挫折。

我目前的解决方案是在电话号码旁边添加一个透明元素，以便浏览器在使用搜索功能时可以找到它。但它感觉很脏。

有没有更好的方法来实现这一目标？

Answer 1

我能提出的唯一方法是，如果你将每组数字包装在自己的<span>中，然后使用CSS来应用破折号进行显示（这似乎是合理的，因为破折号纯粹是为了视觉呈现），例如：

/* selects a <span> element that
   is an adjacent sibling to
   another <span> element; and
   styles the pseudo element (the
   ::before to present the hyphen
   character: */
span + span::before {
  content: '-';
}

<span>555</span><span>123</span><span>4567</span>

据我所知，没有为浏览器的搜索功能提供“提示”的API，但上述方法适用于我（Windows 10 / Chrome 46）允许 ctrl + F 在输入以连字符分隔的数字时查找相关文本。

显然，这种方法的警告是，如果用户使用搜索数字，则包含浏览器的破折号将无法找到。很遗憾，您需要为一致的用户界面找到一个演示文稿解决方案，并尝试教育您的用户如何在JavaScript解决方案的推动下搜索或提供明显的搜索功能。