How to hijack backspace onkeypress (or keydown)?

scubaduba · November 7th, 2004, 01:24 PM

Hi;

I'm trying to write a simple HTMLArea like rich text editor. I'm doing that by changing innerHTML attribute of any tag that supports that on onkeypress event of document. It is easy to write stuff on page that way with unicode caracters, however when the time came to delete stuff by clicking backspace I had a problem. Browser's default behavior is to go to previous page on backspace press. (onkeypress event didn't work either, it doesn't get backspace's ASCII code, so I used onkeydown just for backspace press). I returned false on onKeyDown event if the ASCII code is 70 to prevent browser's default "go to previous page" behavior, but it didn't work. So I also returned false if key was 70 on onKeyUp, still wasn't enough. I can't cancel onkeypress event's backspace default behavior, because it doesn't have any ASCII entry when backspace is clicked. Here is the part of the code I'm using:

function onKeyDown(e){
e=window.event;
var keyco =new Number();
keyco =e.keyCode;
alert(keyco);
    if (keyco==70)
    {
        return false;
    }
}

document.onkeydown = onKeyDown

Any help would be appreciated, thanks.

joefawcett · November 8th, 2004, 05:41 AM

This seems to work:

Code:

<html>
<head>
<title>Cancel Backspace</title>
<script type="text/javascript">  

  function handleKeyDown()
  {
    var src = window.event.srcElement;
    if (src.getAttribute("editable") == "true")
    {
      var iCode = window.event.keyCode;
      if (iCode == 8)
      {        
        src.value += "{BACKSPACE}";
        window.event.returnValue = false;
      }
    }
  }

  function init()
  {
    document.onkeydown = handleKeyDown;
  }  
</script>
</head>
<body onload="init();">
<input type="text" id="txtInput" editable="true" style="position:relative; width=500px;border: 3px inset #c0c0c0;"></div>
</body>
</html>

--

Joe