代码之家 › 专栏 › 技术社区 › elmarco

行号和复制/粘贴(HTML/CSS)

css html javascript

elmarco · 技术社区 · 16 年前

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

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

如果不可行,还有什么替代方案?

谢谢

11 回复 | 直到 16 年前

sh1mmer 16 年前

复制OL的数字是一种浏览器行为。我相信有些浏览器没有,但大多数浏览器都有。

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

基本上,实现它的方法是将Javascript中的代码重写为2列,1列带有编号,1列包含内容。你可以用网格系统来实现这一点,比如 YUI Grids 或 Blueprint 用户将能够选择其中包含内容的第二列,而无需选择第一列。

这样做的问题是,它破坏了屏幕阅读器用户的语义标记,他们不再从有序列表中受益。也许可以在mousedown上这样做,这样只有当用户试图选择文本时,你才能重写它。我并没有测试过这个想法。

免责声明:我为雅虎工作!

davogones 16 年前

您无法真正控制浏览器/操作系统的剪贴板行为。你能做的就是提供一个“复制”链接,并使用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%正常工作。 ;-)

Joao da Silva 16 年前

我猜这取决于浏览器。我尝试了IE 7、Firefox 3和Chrome,但它们都没有复制数字(Chrome“似乎”在选择中复制了它们,但粘贴后它们不在那里)。

Stefan Kost 16 年前

使用像这样的桌子怎么样 http://bugzilla.gnome.org/attachment.cgi?id=127131

Stefan Kost Stefan Kost 16 年前

对我来说,我要么复制数字(firefox 3),要么复制“#”字符(firefox 2),即使它们没有被选中。在ie6上,我刚刚得到了选择。

dr.manhattan 16 年前

您可以使用图像显示数字,这样它们就不会被复制。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 }

所以,在那之后,你只需要弄清楚把图像放在哪里。

Sampson 16 年前

试试看——它写得很快,但可以作为一个很好的开始。您需要做的一些事情是用新元素替换旧列表,而不是像我目前所做的那样将新元素直接添加到正文中。使用(selector).replace With(新元素)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>

Luca Matteis 16 年前

编辑抱歉,忘了添加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编号。

olemarius 16 年前

替代方案

<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>

希望这能有所帮助:-)

SasQ 14 年前

解决方案与 OL & LI 是最语义化的,因为它提供了行号的信息,每一行都是一个单独的块,所以你可以随心所欲地设置它的样式。这些数字在没有CSS的文本浏览器中仍然可见;JavaScript。屏幕阅读器的用户可以逐行跳转,跳过行,他们总是知道自己在哪一行,有多少行。他们甚至可以跳过整个列表。

选择的问题并不真正存在于HTML/CSS/JS领域,因为你不能代替用户决定他想对复制的文本做什么。他可能想复制它具有或没有这些行号同样好。最好存储尽可能多的语义信息,让用户选择他想使用的信息,而不是只给他普通的数据任何选项。

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

我在使用这种技术时遇到的唯一问题是 石油 & 锂 标签不能交叉。如果某个片段(例如块注释)从一行开始并继续到其他行,则必须正确关闭所有标记并在下一行重新打开它,并对每一行都这样做。

呵呵。..如果在未来的HTML版本中可以自动为任何容器中的行编号就好了(比如 PRE , DIV 等等),它们将出现在HTML中,没有样式和Javascript(尽管你可以使用一些伪类来设置这些行号和分隔行的样式)。..但现在,吃你所拥有的;J

Tim Cooper 13 年前

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

希望您提供的是语义HTML,因此复制OL不是理想的结果吗?如果用户复制并粘贴了一组包含链接或图像的段落或文本,该怎么办?你不会怀疑用户希望能够复制段落并完整粘贴语义布局吗?