CODEWITHSUNDEEP
javascriptjqueryonkeyuponkeypress
Sunil
Sunil

Reputation: 21396

Cancel Backspace and all key press when inside a textbox

I have following sample code at https://js.do/sun21170/254818

My goal is to prevent editing of text inside the textbox without using the readOnly or disabled attribute. In above demo code, I am canceling the keyup event when Backspace is pressed, but this is having no effect.

Question: Is it possible to cancel the Backspace key press using JavaScript or jquery when inside a text box without using readOnly or disabled attribute of textbox?

The code of my demo is also as pasted below.

function keyPressed(e) { 
  e.preventDefault();
}
       
function keyUp(e) {
  e.preventDefault();
}
#text1 {
  width:500px;
}
<input type="text" id="text1" onkeypress="keyPressed(event)"     
         onkeyup="keyUp(event)" value="This is some text that should not be editable"></input>

Upvotes: 0

Views: 2506

Answers (4)

Patrick Schocke
Patrick Schocke

Reputation: 1491

I think you have to trigger the keydown event. But this is a working example. Just give every input you don't want to change the class notEditable and the jquery code will prevent the input field to be edited.

$('.notEditable').on('change keydown', function(e){
        	e.preventDefault();
});
#text1 {
      width:500px;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" class="notEditable" value="This is some text that should not be editable"></input>

This code is a little bit cleaner since you only have to add the class and don't need the functions to be called in the html code. However, if you would like to keep the function call in your code, simply change the your input field to this:

<input type="text" id="text1" onkeypress="keyPressed(event)" onkeydown="keyUp(event)" value="This is some text that should not be editable"></input>

Upvotes: 0

Dumisani
Dumisani

Reputation: 3038

Change your onkeypress event to onkeydown and your code will work with backspace and delete button as well. The onkeyup event is not necessary

<input type="text" id="text1" onkeydown="keyPressed(event)" value="This is some text that should not be editable"></input>

Upvotes: 0

HellHammer
HellHammer

Reputation: 125

You could use the below code snippet:

$(document).keydown(function (e) {
                var element = e.target.nodeName.toLowerCase();
                if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
                    if (e.keyCode === 8) {
                        return false;
                    }
                }
});

Certain things to keep in mind when implementing such a functionality, you should also be checking for readyOnly textBoxes or textAreas since a backspace in such an area will result in you leaving the page (assuming you want to prevent a backspace as well).

EDIT: The code is in jQuery.

Upvotes: 0

The KNVB
The KNVB

Reputation: 3844

I change onkeypress="keyPressed(event)" to onkeydown="keyPressed(event)", it works.

Upvotes: 3

Related Questions