javascript - 如何使表列不可复制？ (HTML/CSS)

Question

我有一个简单的表格:

Column A | Column B
--------------------
    A    |  Item1 
    B    |  Item2    
    C    |  Item3   

我想让第一列不可复制。当用户选择表格行并按下 Ctrl+C 时，他应该得到

Item1
Item2
Item3

但不是

A  Item1 
B  Item2    
C  Item3  

我试过了 -moz-user-select: none; -webkit-user-select: none; user-select: none;但它不起作用。文本未被选中但仍被复制。它适用于 Firefox，但不适用于 Chrome 和 Opera。

对我有用的解决方案:由于 height() 不准确，它仍然闪烁并略微修改行高，但对我来说没问题。

$(document).on('copy', function(e) {
    if (navigator.userAgent.indexOf("Firefox")==-1) {
        var nonCopyable = $('.nonCopyable:not(.empty)');
        nonCopyable.each(function(index,el) {
            var $el = $(el);
            if ( $el.hasClass('empty') )  {
                return;
            }
            var width = $(el).width();
            var height = $(el).height();
            $el.data('content', $el.html()).css({"width" : width+'px', "height": height + 'px'} ).html('');
        }).addClass('empty');
        setTimeout(function() { 
            nonCopyable.each(function(index,el) {
            $(el).html($(el).data('content')).removeClass('empty').css({"width":'auto', height:'auto'}).data('content',null);
        }); });
    }
} );

.nonCopyable {
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none;
}

当然，如果您在不可复制的单元格(例如事件处理程序)中不仅有文本和图像，您还需要另一种解决方法。

Answer 1

我不确定这是否满足您的需求(因为与 Internet Explorer 的不兼容)但是一个选择是使用::before/::after 伪元素生成第一列内容并防止它被选择/复制。

同时关注DRY principle ，我们可以使用 data-* 属性来定义内容，然后使用 attr() 表达式将其分配给伪元素。

table > tbody td:first-child::before {
  content: attr(data-content);
}
table > thead th:first-child::before {
  content: attr(data-content);
}

<table>
  <thead>
    <tr>
      <th data-content="Column A"></th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-content="This"></td>
      <td>
        Item #1
      </td>
    </tr>
    <tr>
      <td data-content="is"></td>
      <td>
        Item #2
      </td>
    </tr>
    <tr>
      <td data-content="a"></td>
      <td>
        Item #3
      </td>
    </tr>
    <tr>
      <td data-content="demo"></td>
      <td>
        Item #4
      </td>
    </tr>
  </tbody>
</table>