Fatal编程技术网
  • javascript/
  • Javascript 行编号和复制/粘贴（HTML/CSS）

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

javascript html css

Javascript 行编号和复制/粘贴（HTML/CSS）,javascript,html,css,Javascript,Html,Css,我可以使用什么JS/CSS技巧来防止在有序列表中复制和粘贴数字 <OL> <LI>A <LI>B <LI>C </OL> A B C A B C 如果不可行，有什么替代方案 谢谢我猜它取决于浏览器。我试过IE 7、Firefox 3和Chrome，但它们都没有复制数字（Chrome“似乎”在选择中复制它们，但粘贴后它们就不存在了）。对于我来说，数字（Firefox 3）或“#”字符（Firefox 2）被复制，即使它们没有被选

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

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



  • A

  • B

  • C
  • A
  • B
  • C

    如果不可行，有什么替代方案

    谢谢

    我猜它取决于浏览器。我试过IE 7、Firefox 3和Chrome，但它们都没有复制数字（Chrome“似乎”在选择中复制它们，但粘贴后它们就不存在了）。

    对于我来说，数字（Firefox 3）或“#”字符（Firefox 2）被复制，即使它们没有被选择。在ie6上，我只得到选择。

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

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

    基本上，实现它的方法是将Javascript中的代码重写为2列，1列带有编号，1列带有内容。您可以使用网格系统，如或。用户可以选择包含内容的第二列，而无需选择第一列

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

    免责声明：我为雅虎工作

    编辑 抱歉，忘记添加javascript以禁用对数字的取消选择。。。现在看看代码

    选中此项可禁用跨浏览器选择：

    如果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;
}

    var ol=document.getElementsByTagName（“ol”）[0]；

    对于（var i=0；i试一试-它编写得相当快，但可以作为一个很好的开始。您需要做的一些事情是用新元素替换旧列表，而不是像我目前所做的那样将新元素直接添加到主体中。使用（选择器）。replaceWith（新元素）非常简单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>

    

    
div.newList{
位置：相对位置；
宽度：300px；
字体系列：verdana；
字体大小：12px；
线高：150%；
}
div.newList div.column{
左侧填充：30px；
}
第p列{
保证金：0；
填充：0；
}
部门编号{
位置：绝对位置；
排名：0；
左：0；
宽度：20px；
}
部门编号p{
文本对齐：右对齐；
填充：0；
保证金：0；
}
$（文档）.ready（函数（）{
var newDiv=document.createElement（“div”）；
$（“正文”）。追加（newDiv）；
$（newDiv）.addClass（“newList”）.html（“”）；
$（“ol.alphabet li”）。每个（函数（）{
var指数=$（“ol.alphabet li”）.指数（本）；
var content=$（this.text（）；
$（“div.column”）。追加（“”+内容+”
    ”；
$（“div.numbers”）。追加（“”+（索引+1）+“
    ”；
});
$（“div.column p”）。每个（函数（）{
var指数=$（“第p列”）.指数（本）；
var height=$（this.height（）；
$（“分区编号p:eq（“+索引+”））。高度（高度）；
});
});

  • 这是一个示例行，它将教我如何将所有内容排列起来
    • 

  • 太短了
    • 

  • C
    • 

    我认为答案更多地取决于您粘贴到的应用程序，而不是浏览器的复制过程，而这实际上是浏览器应该做的事情
    

    希望您提供的是语义HTML，因此复制OL不是理想的结果吗？如果用户复制和粘贴一组包含链接或图像的段落或文本，会怎么样？您不会怀疑用户希望能够复制段落并粘贴完整的语义布局吗？
    您可以使用imagCSS可以用来抵消数字和文本，使其看起来像一个普通的列表
    
CSS:
    

    因此，在这之后，您只需找出图像的放置位置。
    您无法真正控制浏览器/OS的剪贴板行为。您可以做的是提供一个“复制”链接，并使用jquery和插件
    

    

  • A

  • B

  • C

    • 

    免责声明：上述示例可能不是100%功能性的；-
    使用中的表格怎么样

    备选方案
    

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

    

      

    • 虚线列表项
      • 

    

    
打印：**列表项*
    

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

    

    

  • 编号列表项
    • 

    
印刷品：1。列表项
    

    
类别
列表项
类别
列表项

    
只给“列表项”一个缩进
    
解决方案
    
所以，为了做到这一点，在没有JS魔法的情况下，同时打破一些语义规则，就是在dl列表中只使用dt
    

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

    

    
项目
项目

    

    希望这有帮助：-）
    使用
    OL
    &
    LI
    的解决方案是最具语义的，因为它提供了行号信息，并且每一行都是一个单独的块，因此您可以随意设置其样式。这些数字在没有CSS和JavaScript的文本浏览器中仍然可见。屏幕阅读器的用户可以从一行跳到另一行，跳过几行，他们总是知道自己在哪一行，有多少行。他们甚至可以跳过整个列表
    
选择的问题实际上并不在HTML/CSS/JS域中，因为你不能代替你的用户决定他想对复制的文本做什么。他可能想复制它，不管有没有这些行号。最好存储尽可能多的语义信息，并让用户选择要向我们提供的语义信息

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

    

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

    

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