Start Building Professional
Web Apps Today

Backspace issue after selecting or hovering row

I wish to disable the "Backspace" key when I'm not editing a grid or a form element (i.e. text box) because the "Backspace" key has the undesired effect of being the equivalent of a click on the "Back" icon for Internet Explorer and Firefox. The javascript below is used to disable the "Backspace" key.

However, after I hover over a grid (with enableLightMouseNavigation) or edit a grid cell, although the javascript code still runs, it no longer disables the undesired "Back" effect. Can you provide guidance. I'm using dhtmlxGrid version 2.1. Thanks.

<script type="text/javascript">

// Trap Backspace(8) and Enter(13) -
// Except bksp on text/textareas, enter on textarea/submit

if (typeof window.event != 'undefined') // IE
{
document.onkeydown = function() // IE
{
var t=event.srcElement.type;
var kc=event.keyCode;
if((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) || (t == 'textarea') || (t == 'password') || (t == 'file') || ( t == 'submit' && kc == 13))
{
return true;
}
else
{
return false;
}
}
}
else
{
document.onkeypress = function(e) // FireFox/Others
{
var t=e.target.type;
var kc=e.keyCode;
if ((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) || (t == 'textarea') || (t == 'password') || (t == 'file') || ( t == 'submit' && kc == 13))
{
return true;
}
else
{
//alert('Sorry Backspace/Enter is not allowed here'); // Demo code
return false;
}
}
}
</script>

We tested your code and it works well. After selecting a row in grid "backspace" keypress event is blocked. Could you please provide use full example where we can reproduce this issue?

Let me clarify the problem further.  The problem is occuring after the mouse has hovered over the grid and the cursor is no longer on the grid but in the html document.

In the function below is how I initialize one of the simpler tables.  One extra bit of complexity is that I use Ajax to generate and modify all the table content (for security reasons).  I'm not sure if this may be the source of the problem.  I even tried adding (unsuccesfully) the following code in the function below:

• dhtmlxEvent(document.body,"keydown",function(e){ if (!mygridSink.editor && (e||event).keyCode == 8) return false; });

Although the above code is capturing the keystroke, the "return false" is not having an effect.

function doInitGridUniformity()
    {

        mygridSink = new dhtmlXGridObject('mygridHeatSink');
        mygridSink.setImagePath("includes/dynatable/codebase/imgs/");

        mygridSink.setHeader("R_th<br>(&deg;C/W),Base Ht.<br>(mm),Fin<br>Count,Fin Ht.<br>(mm),Fin Space<br>(mm)");
        mygridSink.setInitWidths("71,70,70,70,70");
        mygridSink.setColAlign("center,center,center,center,center");         
        mygridSink.setSkin("light");   
        mygridSink.init();
      
        var ar = [['','','','','']]
        mygridSink.parse(ar,"jsarray");

        mygridSink.setEditable(0) 
        mygridSink.enableLightMouseNavigation(1)
       
        dhtmlxEvent(mygridSink.entBox,"mousemove",function(e){ (e||event).cancelBubble=true;});
        dhtmlxEvent(document.body,"mousemove",function(){ if (!mygridSink.editor) mygridSink.clearSelection(); });      
    }

Could you please provide us full example where we can reproduce this issue including files which you are using to initialize grid?

See attached zipped file ("test.zip").  "test.asp" is the file that you should run (you will have to change my directory structure to refere to your dhtmlx files).  It is the minimum amount of code that will illustrate the problem.  For Ajax, I use jquery (also included in the zipped file for convenience).  If you determine that I should use your Ajax module, then I will be happy to convert.

This issue is not related to the grid componet but to the browser work. You example work as expected at the FireFox but doesn't work in Opera and IE. 

Then why does the code work in IE and stops working when I hover over a grid.  This is an indication that the cause it is not 100% with the IE browser but that the grid code has a bit of responsibility.  Is this something you are willing to investigate?

Change in your code 
document.onkeydown = function() // IE
...
else
  {
      return false;
  }


to the
document.onkeydown = function() // IE
...
else
  {
      event.returnValue=false;
      return false;
  }

 

In case of IE , when multiple handlers hearing onkeydown event, returning false only from one of them will not block keyboard action ( grid also has handler attached to this event )
By defining returnValue property you override any other kind of response. 

Thank you.  It works.  Your assistance if much appreciated.