How to prevent user from typing in text field without disabling the field?

Question

I tried:

$(\'input\').keyup(function() {

   $(this).attr(\'val\', \'\');

});

but it removes the entered text slightly after a letter is enter

Answer 1

I like to add one that also works with dynamic javascript DOM creation like D3 where it is impossible to add:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

to prevent actions on a HTML input DOM element add readonly to class:

var d = document.getElementById("div1");
d.className += " readonly";

OR in D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

AND add to CSS or less:

.readonly {
  pointer-events: none;
}

the nice thing about this solution is that you can dynamically turn it on and of in a function so it can be integrated in for example D3 at creation time (not possible with the single "readonly" attribute).

to remove the element from class:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

or use Jquery:

$( "div" ).removeClass( "readonly" )

or toggle the class:

$( "div" ).toggleClass( "readonly", addOrRemove );

Just to be complete, good luck =^)