how to make text area so we can only copy and paste in it not editable

Question

I want to only copy and paste in textarea . I don't want to edit in that 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>

Have you tried anything? This could help you: https://stackoverflow.com/questions/21605961/restrict-html-input-to-only-allow-paste — C.Schubert, Feb 17 '18 at 11:53
Possible duplicate of [Restrict HTML input to only allow paste](https://stackoverflow.com/questions/21605961/restrict-html-input-to-only-allow-paste) — Muhammad Omer Aslam, Feb 17 '18 at 12:03

Pedram · Answer 1 · 2018-02-17T12:22:48.297

2

You can prevent to press any key except ctrl+c and ctrl+v or ctrl+x like this:

Allow:

ctrl+c ctrl+v ctrl+x Also Copy Paste button on RightClick

DisAllow:

Everything

$('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>

edited Feb 17 '18 at 12:22

answered Feb 17 '18 at 12:17

Pedram

15,766
10
44
73

2

Your `ctrl` variable can be defined in a simpler way: `var ctrl = e.ctrlKey || e.keyCode == 17`. Also, there is no need for an `if` clause: `return ctrl && (...||...||...)` – Angel Politis Mar 18 '18 at 03:42

score 1 · Answer 2 · edited Feb 19 '18 at 06:01

disable the keydown event in the textarea on enable mousedown events in that way we can force it to only copy/paste not to edit.

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

Bhuwan · Answer 3 · 2018-02-18T17:28:38.183

You have to prevent the keydown on textarea on all keyboard keypress except ctrl+c, ctrl+v, command+c, command+v keys.

Use event.metaKey for the mac command key.

^{Try to copy the text of textarea using ctrl+c or paste any text inside it using ctrl+v}

Stack Snippet

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>

score 0 · Answer 4 · answered Mar 18 '18 at 03:27

Expanding on Abhishek Singh's example; in ES6 with arrow functions and jQuery it can be as succinct as:

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

(Similar story but with "c" for preventing anything but copy)

how to make text area so we can only copy and paste in it not editable

4 Answers4