html - css 技巧在复制粘贴时禁用文本选择

Question

我有一个字母序列，每个字母上面都有数字。我想禁用文本选择，这样当用户从屏幕上复制粘贴字母序列时，他不会得到数字。

我实际上没有使用 select css 技巧，数字被排除在选择之外，但我得到了数字所在的空格。像这样:

T

QD

所需的输出是:

TQD

这是我的代码:

<div style="margin-bottom:0px;font-size: 0.65vw;">
  <div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
  <p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">1</p>
  <span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">T</span></div>
  <div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">2</p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">Q</span></div>
  <div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size: 0.6px;padding-top: 2px;height:0.6vw;"></p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">D</span></div></div>

有什么 css 技巧吗？

Answer 1

如果您可以禁用 ctrl 按钮并右键单击网页，则复制粘贴功能将自动禁用。我认为以下代码会对您有所帮助。

<script>
  $(window).on('keydown',function(event)
 {
 if(event.keyCode==123)
 {
    alert(' Developer Tools is disable from this website.');
    return false;
 }
 else if(event.keyCode==17)
 {
    alert('Control key is disable from this website.');
    return false;
 }    

  });
  $(document).on("contextmenu",function(e)
 {
   alert('Right click is disable from this website!')
  e.preventDefault();
 });

 </script>