如何制作文字区域，以便我们只能复制并粘贴其中不可编辑

Question

我只想复制并粘贴textarea。我不想在textarea进行编辑。

<form action="save.php" method="post">

  <h3>Text:</h3>


  <textarea name="text" rows="4" cols="50"></textarea>

  <br><br>

  <input type="submit" name="submit" value="submit">

</form>

Answer 1

在启用keydown事件的textarea中停用mousedown事件 以这种方式，我们可以强制它只复制/粘贴不编辑。

$(".area").bind("mousedown", function(e) {
  console.log('hello')
});
$(".area").bind("keydown", function(e) {
  console.log('world');
  event.preventDefault();
});

.touch {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Text:</h3>


<textarea name="text" rows="4" cols="50" class="area"></textarea>

<br><br>

<input type="submit" name="submit" value="submit">

Answer 2

您可以阻止按 ctrl + c 和 ctrl + v 或 ctrl + x 之外的任何键：

允许

ctrl + c ctrl + v ctrl + x 此外复制 粘贴 RightClick

上的按钮

<强>不允许：

一切

$('textarea').on('keydown', function(e) {
  var ctrl = e.ctrlKey ? e.ctrlKey : ((e.keyCode === 17) ? true : false);
  if (e.keyCode === 86 && ctrl || e.keyCode === 67 && ctrl || e.keyCode === 88 && ctrl) {
    return true;
  } else {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="text" rows="4" cols="50">Some Text</textarea>

Answer 3

除了 ctrl + c ， ctrl + v ，命令外，您必须阻止所有键盘按键上的keydown textarea + c ， command + v keys。

使用event.metaKey作为mac 命令键。

^{尝试使用 ctrl + c 复制textarea的文本，或使用 ctrl + v}

Stack Snippet

＆＃13;

＆＃13;

var textarea = document.getElementById("text");

textarea.addEventListener("keydown", function(event) {
  var key = event.key;
  var cmd_key = event.metaKey;
  var ctrl_key = event.ctrlKey;
  if ((cmd_key && key == "c") || (ctrl_key && key == "c")) {
    return true;
  } else if ((cmd_key && key == "v") || (ctrl_key && key == "v")) {
    return true;
  } else {
    event.preventDefault();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <h3>Text:</h3>
  <textarea id="text" name="text" rows="4" cols="50">Copy this text and paste</textarea>
  <br><br>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

扩展Abhishek Singh's示例;在带有箭头函数和jQuery的ES6中，它可以如下简洁：

$textarea = jQuery("<textarea>")
     .on("keypress", (e) => e.ctrlKey && e.key == "v")

（类似的故事，但“c”用于防止除了复制之外的任何事情）