如何制作文本区域，因此我们只能复制和粘贴不可编辑答案

【问题标题】：how to make text area so we can only copy and paste in it not editable如何制作文本区域，因此我们只能复制和粘贴不可编辑
【发布时间】：2018-02-17 11:49:53
【问题描述】：

我只想复制和粘贴 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>

【问题讨论】：

你有没有尝试过？这可以帮助你：stackoverflow.com/questions/21605961/…
Restrict HTML input to only allow paste的可能重复

标签： javascript jquery html css

【解决方案1】：

您可以阻止按除 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>

【讨论】：

您的ctrl 变量可以用更简单的方式定义：var ctrl = e.ctrlKey || e.keyCode == 17。此外，不需要if 子句：return ctrl && (...||...||...)

【解决方案2】：

在启用mousedown 事件时禁用textarea 中的keydown 事件这样我们就可以强制它只复制/粘贴而不是编辑。

$(".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">

【讨论】：

【解决方案3】：

除了 ctrl+c、ctrl+v、command+c kbd>, command+v 键。

使用event.metaKey 作为mac command 键。

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

堆栈片段

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();
  }
});

<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>

【讨论】：

【解决方案4】：

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

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

（类似的故事，但用“c”表示防止复制）

【讨论】：