Question

I need to have an input textbox in which I can click and the cursor starts blinking but the user cannot change any text inside it.

I tried using “readonly” or “disabled” attributes, but they do not allow the cursor to be inside the textbox. So, I was thinking of a solution to implement in JavaScript on a normal textbox. Is there a plugin that already do this? How do I implement this?

EDIT: Thanks for all the answers, but I wanted to make the textarea/input type text as uneditable but selectable at the same time. Pressing Ctrl + A inside the textbox doesn’t work. Is it possible to get the changed value and the old value and compare them and then return false if the values are different, but in all other cases return true so that the Ctrl + A, Shift + end, etc. combinations work?

Answer 1

Something like this:

<textarea onkeydown="javascript:return false;"></textarea>

would do the trick. (jsfiddle)

You can also do that at runtime if you want to:

<textarea class="readonly"></textarea>

with

$(".readonly").keydown(function() false);

The onkeydown callback captures keystroke events and cancels them using return false;.

Depending on what you are trying to do, you may want to prevent other kind of events, since it is still possible to change the contents with the mouse, for instance.

Your callback function can accept or cancel events depending of the kind of keystroke. For example, to enable only ctrl-a and ctrl-c (with jQuery):

function keydown(e) {
  if(!e.ctrlKey) return false; // Cancel non ctrl-modified keystrokes
  if(e.keyCode == 65) return true;// 65 = 'a'
  if(e.keyCode == 67) return true;// 67 = 'c'
  return false;
}