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>

Answer 2

我找到了解决方案！我使用的标签 p 是一个块元素，这就是为什么它将在标签所在的位置留一个空格的原因。相反，使用诸如 b 或 span 之类的内联元素将不会留任何空间。

CSS技巧禁用复制粘贴上的文本选择

2 个答案: