0

I'm working on a site that prevents backspace in an input field by default, but for this particular input, I would like to return it to its default behaviors to accept backspace.

What is the simplest way to do this? Basically I need the opposite of preventDefault().

Update: I added the following message in the comment but thought it's important to the question. So here it is:

Unfortunately, I have no idea how it prevents the backspace. I'm creating a Chrome extension which injects an input field into the page. Everything works except the backspace. I tried to find the code where it prevents it but it's impossible.

My code to create the field is this:

if(!document.getElementById("input_typing")){
        var input = document.createElement('input');
        input.id = "input_typing";
        input.tabIndex = 1;
input.style.width = "95%";
        input.focus();
        txts[i].parentNode.appendChild(input);
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Johnny
  • 71
  • 1
  • 8

2 Answers2

1

My idea is: there could be an handler attached to the document so that *site that prevents backspace *.

I'm not sure of this, but I created a snippet to clarify my idea:

if an event handler prevent the default action on backspace you may add a new event handler for your newly created input field in order to stop propagation.

//
// Let's assume this is the site handler to prevent backspace
//
document.addEventListener('keydown', function(e) {
  if (e.which === 8) {
    e.preventDefault();
  }
});


//
// your new element
//
if(!document.getElementById("input_typing")){
  var input = document.createElement('input');
  input.id = "input_typing";
  input.tabIndex = 1;
  input.style.width = "95%";
  input.focus();
  document.querySelectorAll('input[type="text"]')[0].parentNode.appendChild(input);

  //
  // Add the keydown event handler to stop propagation
  //
  input.addEventListener('keydown', function(e) {
    e.stopPropagation();
  });
}
<form action="action_page.php">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
</form>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
0

In Case if it is JavaScript file which prevents the backspace :

You can do inline scripting in your page directly after the js file (which contains code to prevent the backspace in input filed) is added.

So that the JS will be included - it will disable backspace. Post this when you do your inline scripting to enable the previous functionality - your script code will override the included js

In Case if it is CSS file which prevents the backspace :

You can use inline css scripting with !important at the end of each line so that this will override the existing css.

Note : It would be best to add your css/js inline scripting code at the end of the page to provide certainty and avoid confusions.

Patrick
  • 1,635
  • 2
  • 13
  • 23
  • You can prevent backspace with CSS? I didn't know that. What would the inline script look like to enable the previous functionality? – Johnny Sep 17 '16 at 20:41
  • you just need to add your code in the previous page and map to the input field again. – Patrick Sep 17 '16 at 20:44
  • suppose say your input (with class="inputField1") previously had 25 characters allowed and now, because of some included js allows only 5 characters, you can do this. Add code like this to the end of your page `` – Patrick Sep 17 '16 at 20:46
  • You're talking about maxlength. My issue is entirely different. When I press the backspace key, the input field completely ignores it. I have to use the delete key to delete characters. – Johnny Sep 17 '16 at 20:48
  • Suppose say your input is with id = "mytextarea" the below code will do the trick for enabling **backspace** when added in inline scripting `document.getElementById('mytextarea').addEventListener('keydown', function(e){ if (e.which == 8){ e.preventDefault(); return true; } }, false);` – Patrick Sep 17 '16 at 20:54
  • You would be my hero if you could figure this out for me, and BTW, I'm not using jquery, just regular javascript. Thanks. – Johnny Sep 17 '16 at 20:56
  • please check the code (edited) in the above comment can be of help – Patrick Sep 17 '16 at 20:58
  • Hmm, your code says if it is backspace, prevent default behaviors and return back. This is my problem, not my solution. I need the opposite. I need the field to return to the default behaviors. – Johnny Sep 17 '16 at 21:02
  • http://stackoverflow.com/questions/4690330/jquery-keypress-backspace-wont-fire check here if this helps – Patrick Sep 17 '16 at 21:11
  • Thanks, Pat. GaetanoM solved my problem. It's amazingly simple. – Johnny Sep 17 '16 at 21:14