锚标签显示完整链接问题答案

【问题标题】：Anchor tag display full link issue锚标签显示完整链接问题
【发布时间】：2013-06-22 14:11:02
【问题描述】：

我发现了一些非常棒的链接检测正则表达式，效果非常好。它只取链接的主要部分并将其显示为锚标记的主体，并将整个链接显示为 href。例如http://somesite.com/index.php?some=var 看起来就像somesite.com。这只是纯粹的令人敬畏，但它也有它的缺点，因为有人可能会传递一些你可能出于某种原因不一定想要发送的变量，我认为我需要在锚正文中显示整个 url。可悲的是，我不想放弃漂亮的主播，我决定我应该在某些事件上显示完整链接，因此麻烦来了。

首先我想我应该使用鼠标悬停（jquery 的 mouseenter）来显示完整的链接，然后使用 mouseleave 让它再次美观。不幸的是，由于在一行末尾带有一堆参数的站点名称很短，因此没有成功。示例：如果在一行的末尾有一个带有 body site.com 和 href http://site.com/some/params 的锚点，扩展后它将转到下一行，这将触发鼠标离开并压缩它，它会自行返回链接到原始行并触发 expand 函数创建一个无限循环。

第二个想法是右键单击展开链接。显然，必须禁用要扩展的链接上的上下文菜单。不幸的是，在一行的末尾有相同的链接会导致显示上下文菜单，因为在展开后右键单击也会在短链接所在的空白处触发。

我的想法似乎已经用完了，有人有吗？

【问题讨论】：

悬停时在状态栏中显示完整链接是不够的（我使用的所有浏览器的标准行为）。
我会这样做，隐藏http://www. 并让其余部分可见。没有可用性问题，也不需要 JS。
@nnnnnn 有些用户甚至不知道那是什么，而且他们不在少数。我想扩展链接对这些用户也无关紧要，但是哦……如果我需要一个借口，这是一个好主意，但没想到这一点，谢谢！ :P
@FabrícioMatté 有很多网站不使用 seo 友好的 url，我不想在最后显示这些参数：s
嗯，正如你所说，有些用户甚至不知道状态栏，所以扩展链接对他们来说可能会更糟糕。 :P我想过一些 CSS 黑客。这将防止链接包装jsfiddle.net/yp7hr/1，但您的布局会损坏。最好放置一个显示完整 URL 的工具提示（作为本机 title 属性），以免破坏布局。

标签： javascript jquery html hyperlink tags

【解决方案1】：

在不破坏布局的情况下，您可以使用原生的 title 属性来显示完整的 URL，或者，对于更可定制的东西，可以使用 jQuery UI 的 tooltip widget 等插件。

<a href="http://www.shorturl.com/?param=notSoShortUrl"
  title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>

如果在初始标记中输出title 属性，即使禁用了 JS，此解决方案也可以工作。如果您愿意，jQuery UI 工具提示可能有助于为启用 JS 的用户定制它。

如果有人对如何修补 OP 中描述的断行问题感兴趣，这是我实现非断行可扩展链接的原始解决方案：

<a href="http://www.aaaaaaaaaaaaaaaaaa.com/?params=somelongstring">aaaaaaaaaaaaaaaaaa.com</a>

$('a').hover(function(e) {
    $(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
    $(this).css({
        width: this.offsetWidth,
        whiteSpace: 'nowrap',
        display: 'inline-block'
    }).data('shorturl', $(this).text());
});

Demo

不过，这主要是一个 CSS hack，并且链接文本可能会泄漏到容器之外（显然，如果容器有 overflow:hidden，则不会工作），因此它对于布局目的不是很好。最好坚持使用title 或工具提示插件。

【讨论】：