Question

我可以使用什么JS / CSS技巧来防止在有序列表中复制和粘贴数字？

<OL>
<LI>A
<LI>B
<LI>C
</OL>

甲
乙
Ç

如果不可行，有哪些替代方案？

感谢

Answer 1

复制OL的编号是浏览器行为。我相信一些浏览器不会，但大多数浏览器。

一旦页面加载，您可以使用JavaScript重写代码，使其看起来相同但不在下面。这将解决您的复制问题，但会导致其他问题，例如可访问性。

实际上，实现它的方法是将Javascript中的代码重写为2列，1表示编号，1表示内容。您可以使用YUI Grids或Blueprint等网格系统执行此操作。用户可以选择包含其中内容的第二列，而无需选择第一列。

这个问题是它破坏了屏幕阅读器用户的语义标记，他们不再受益于有序列表。有可能在onmousedown上执行此操作，以便仅当用户尝试选择您重写它的文本时。并不是说我已经测试了这个想法。

免责声明：我为雅虎工作！

Answer 2

您无法真正控制浏览器/操作系统的剪贴板行为。您可以做的是提供“复制”链接，并使用jquery和jquery.copy插件。

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.copy.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="$.copy($('#theList').find('li').text())">Copy</a>
<OL id="theList">
<LI>A
<LI>B
<LI>C
</OL>
</body>
</html>

免责声明：以上样本可能不具备100％的功能。 ; - ）

Answer 3

我的猜测是依赖于浏览器。我尝试使用IE 7，Firefox 3和Chrome，但没有一个人复制这些数字（Chrome“好像”会在选择中复制它们，但在粘贴后它们不存在）。

Answer 4

对我来说，即使没有选中，我也会复制数字（firefox 3）或'＃'字符（firefox 2）。在ie6我得到了选择。

Answer 5

您可以使用图像显示数字，然后不会复制它们。 CSS可用于抵消数字和文本，使其看起来像普通列表。

CSS：

OL>li {  list-style-type: none; padding-left: 10px }
OL>li .one { background-image: url('images/one.png') no-repeat left }
OL>li .two { background-image: url('images/two.png') no-repeat left }

所以，之后你只需要找出放置图像的位置。

Answer 6

使用像中的表怎么样？ http://bugzilla.gnome.org/attachment.cgi?id=127131

Answer 7

修改抱歉忘记添加javascript以禁用对号码的取消选择...现在查看代码。

选中此选项以禁用跨浏览器的选择：http://answers.yahoo.com/question/index?qid=20090107041047AAvbI1u

如果Javascript是一个选项，您可以自己添加数字：

var ol = document.getElementsByTagName("ol")[0]; for(var i=0; i<ol.childNodes.length; i++) { ol.childNodes[i].innerHTML = "<span style='MozUserSelect:none;'>"+i+".</span> "+ol.childNodes[i].innerHTML; }

或类似的东西。

然后当然摆脱了CSS编号。

Answer 8

给这一点 - 它写得相当快，但可以作为一个很好的开始。你要做的一些事情是用新元素替换旧列表，而不是像我现在那样直接将新元素添加到正文中。使用（selector）.replaceWith（newElement）jQuery功能非常简单。

<style type="text/css">
    div.newList {
        position:relative;
        width:300px;
        font-family:verdana;
        font-size:12px;
        line-height:150%;
    }
        div.newList div.column {
            padding-left:30px;
        }
            div.column p {
                margin:0;
                padding:0;
            }
        div.numbers {
            position:absolute;
            top:0;
            left:0;
            width:20px;
        }
            div.numbers p {
                text-align:right;
                padding:0;
                margin:0;
            }
</style>
<script type="text/javascript">

    $(document).ready(function(){

        var newDiv = document.createElement("div");
        $("body").append(newDiv);
        $(newDiv).addClass("newList").html("<div class='column'></div><div class='numbers'></div>");

        $("ol.alphabet li").each(function(){
            var index = $("ol.alphabet li").index(this);
            var content = $(this).text();
            $("div.column").append("<p>"+content+"</p>");
            $("div.numbers").append("<p>"+(index+1)+".</p>");
        });

        $("div.column p").each(function(){
            var index = $("div.column p").index(this);
            var height = $(this).height();
            $("div.numbers p:eq("+index+")").height(height);
        });

    });

</script>
<body>

    <ol class="alphabet">
        <li>This is a sample row that will teach me how to get all of the things lined up.</li>
        <li>Too Short.</li>
        <li>C</li>
    </ol>

</body>

Answer 9

我认为答案更多的是与您粘贴的应用程序而不是浏览器的复制过程有关，这实际上是浏览器做的正确的事情吗？

希望你提供语义HTML，因此不会复制OL是理想的结果吗？如果用户正在复制和粘贴包含链接或图像的一组段落或文本，该怎么办？您是否怀疑用户是否希望能够复制段落并将其粘贴在语义布局中？

Answer 10

替代方案

<ul>
  <li>Dotted list item</li>
</ul>

打印：**列表项*

<ol>
  <li>Numbered list item</li>
</ol>

打印： 1。列表项

<dl>
<dt>Category</dt>
<dd>List Item</dd>
<dt>Category</dt>
<dd>List Item</dd>
</dl>

只给“列表项”缩进。

<强>解决方案

所以，为了做到这一点，没有JS魔法，同时打破一些语义规律，就是在dl列表中使用一个唯一的dt。

<dl>
  <dt>Item</dt>
  <dt>Item</dt>
</dl>

希望这会有所帮助： - ）

Answer 11

OL＆amp;解决方案LI是最具语义性的，因为它提供有关行号的信息，每行都是一个单独的块，因此您可以根据自己的喜好设置样式。这些数字仍然可以在没有CSS＆amp; JavaScript的。屏幕阅读器的用户可以从一行跳到另一行，跳过行，他们总是知道他们在哪一行以及有多少行。他们甚至可以跳过整个列表。

选择的问题实际上并不在HTML / CSS / JS域中，因为您不能决定用户而不是用户对复制的文本做什么。他可能希望用或复制，而不用这些行号。最好存储尽可能多的语义信息，并让用户选择他们想要使用哪些语言信息，而不是只给他一些没有任何选项的普通数据。

但是如果你想给他一个简单的方法来复制普通的资源而没有任何额外的标记或行号，给他一个指向纯文本源文件的链接。然后，他将能够单击它并在单独的页面中显示纯文本源文件。他可以从那里复制粘贴它，没有任何行号等，甚至可以从他自己的文档链接到纯文本源，或者从浏览器的地址栏复制粘贴URL，将其发送给他的朋友程序员;-)你甚至可以列出您网站上某处的所有纯文本源文件。

我使用此技术遇到的唯一问题OL＆amp; LI是标签无法交叉。如果某个片段（例如块注释）从一行开始并继续到其他行，则必须正确关闭所有标记并在下一行重新打开它，并对每一行执行此操作。

嗯......如果只是在以后的某个HTML版本中可以自动为任何容器中的行编号（例如PRE，DIV等），它们将出现在没有样式和JavaScripts的HTML中（虽然你可以设置这些行号的样式并使用一些伪类分隔行...）但是现在，吃你拥有的东西; -J

行号和复制/粘贴（HTML / CSS）

11 个答案: