HTML 可用性问题 - （双击）单击以选择文本答案

【问题标题】：HTML usability question - (double) clicking to select textHTML 可用性问题 - （双击）单击以选择文本
【发布时间】：2010-06-20 09:09:09
【问题描述】：

众所周知，在浏览器中双击一个单词会选中它，三次单击会选中整个段落。

我正在调整一个 wiki，其中匿名用户的签名是自动创建的，它们看起来像：

--- // //

“---”生成一个—，//是斜体文本并生成。

这就是它现在的工作方式，因为我对其进行了调整。现在我想知道可用性。

我的问题是：如何生成标记，以便在双击 IP 地址时，将选择整个地址并且仅选择该地址？

标记语言无关紧要，您可以在 HTML 中提供解决方案，但最好使用特定于 wiki (dokuwiki) 的解决方案。

谢谢

【问题讨论】：

这当然是可以解决的，但解决方案可能会很复杂。这个是来做什么的？更改 Wiki 使其不会自动添加内容不是更容易吗？
我是调整它以添加该内容的人。它有效，但现在我想知道可访问性
这是干什么用的？可访问性是什么意思？

标签： html usability accessibility wiki dokuwiki

【解决方案1】：

感谢大家，但我已经设法通过使用没有边框和网站背景颜色的只读文本字段集来做到这一点。

双击按预期工作，无需依赖客户端脚本。

【讨论】：

【解决方案2】：

HTML 无法做到这一点。也许使用 Javascript。基本上，您只需检测某个区域的双击，然后选择适当的文本。

编辑：

下面是如何在符合 W3C 的浏览器中执行此操作（例如 Firefox，它可能无法在不符合 W3C 的浏览器并使用不同的文本选择模型的 IE 中运行）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <script type="text/javascript">
            function select(elem) {
                var sel = window.getSelection();
                var range = sel.getRangeAt(0);
                range.selectNode(elem);
                sel.addRange(range);
            }            
        </script>
    </head>
    <body>
        <p>a simple paragraph, this is 
            <span onclick="select(this);">clickable area</span> 
            when this 
            <span ondblclick="select(this);">span tag is double-clicked</span>
            then they will be selected
        </p> 
    </body>
</html>

【讨论】：

在最新的chrome中，函数的第一个参数是事件，所以用e和elem替换了参数e.target，效果很好。
根据Event 文档，第一个参数实际上是事件对象本身，而不是元素。见developer.mozilla.org/en/docs/Web/API/Event。编辑：刚刚注意到您明确地将this 作为第一个参数传递。
@haridsv：如果您使用 addEventListener() 附加事件处理程序，这是正确的。当事件与此处的@onclick 属性内联时，参数由您传递给处理程序的任何内容确定，在本例中为this，即元素。如今，与附加到 onclick 属性相比，使用 addEventListener() 或 jquery 不显眼地附加可能是更好的做法。
是的，我使用带有bind() 的jQuery 选择器，它必须在内部执行addEventListener。感谢您的澄清，我仍然是网络编程的新手 :)