KeyDown Event für HTML Table Cell

[Stephan]

Hallo ich würde gern ein onKeyPress - Event für eine zur Laufzeit generierte Tabelle erstellen.
Ich weise bereits zur Laufzeit verschiedene Events bestimmten Funktionen zu. Die Vorgehensweise funktioniert für IE und Opera. Unter Firefox wird das OnKeyPress Event aber nicht ausgelöst. Gibt es ein bestimmtes Property, welches dafür sorgt, das HTML Objekte Keyboard Kommandos unter FireFox empfangen können???

Hier ein CodeSnippet

//onCellKeyDown EventHandler
...
__onCellKeyDown: function(e){
    if (!e) e = window.event;
    if (e){
        var keyCode=(e.keyCode)? e.keyCode: e.charCode;
        if (!isNull(keyCode))alert(keyCode);
    }
    return false;
},
...
//Zuweisung der Events...
cell.onmousedown = this.__onCellMouseDown.bind(cell);
cell.onmouseup = this.__onCellMouseUp.bind(cell);
cell.ondblclick = this.__onCellDblClick.bind(cell);
cell.onkeydown = onCellKeyDown.bind(cell);

Vielen Dank für die Hilfe oder eventuelle Hinweise im Vorraus...

[Stephan]

Typo in Snippet
onCellKeyDown.bind(cell); = this.__onCellKeyDown.bind(cell);

Kann leider kein Hinweis zu dem Problem unter Goolge finden.
document.onkeydown lässt sich auch unter FF korrekt behandeln.
Demnach müsste es ja generell möglich sein.
Eventuell ja auch eine Browser-Einstellung unter FireFox???

[Struppi]

Typo in Snippet
onCellKeyDown.bind(cell); = this.__onCellKeyDown.bind(cell);

Kann leider kein Hinweis zu dem Problem unter Goolge finden.
document.onkeydown lässt sich auch unter FF korrekt behandeln.
Demnach müsste es ja generell möglich sein.
Eventuell ja auch eine Browser-Einstellung unter FireFox???

Nö, das geht, die Frage ist ob deine Funktion auch einen Referentz auf eine Funktion zurückgibt. Was ist bind()

Struppi.

[Stephan]

.bind ist eine Methode aus dem Objekt Prototypen der ajaxpro DLL

//--------------------------------------------------------------
// Copyright (C) 2006 Michael Schwarz (http://www.ajaxpro.info).
// All rights reserved.
//--------------------------------------------------------------

// prototype.js
Object.extend = function(dest, source, replace) {
 for(var prop in source) {
  if(replace == false && dest[prop] != null) { continue; }
  dest[prop] = source[prop];
 }
 return dest;
};

Object.extend(Function.prototype, {
 apply: function(o, a) {
  var r, x = "__fapply";
  if(typeof o != "object") { o = {}; }
  o[x] = this;
  var s = "r = o." + x + "(";
  for(var i=0; i<a.length; i++) {
   if(i>0) { s += ","; }
   s += "a[" + i + "]";
  }
  s += ");";
  eval(s);
  delete o[x];
  return r;
 },
 bind: function(o) {
  if(!Function.__objs) {
   Function.__objs = [];
   Function.__funcs = [];
  }
  var objId = o.__oid;
  if(!objId) {
   Function.__objs[objId = o.__oid = Function.__objs.length] = o;
  }

var me = this;
  var funcId = me.__fid;
  if(!funcId) {
   Function.__funcs[funcId = me.__fid = Function.__funcs.length] = me;
  }

if(!o.__closures) {
   o.__closures = [];
  }

var closure = o.__closures[funcId];
  if(closure) {
   return closure;
  }

o = null;
  me = null;

return Function.__objs[objId].__closures[funcId] = function() {
   return Function.__funcs[funcId].apply(Function.__objs[objId], arguments);
  };
 }
}, false);

Object.extend(Array.prototype, {
 push: function(o) {
  this[this.length] = o;
 },
 addRange: function(items) {
  if(items.length > 0) {
   for(var i=0; i<items.length; i++) {
    this.push(items[i]);
   }
  }
 },
 clear: function() {
  this.length = 0;
  return this;
 },
 shift: function() {
  if(this.length == 0) { return null; }
  var o = this[0];
  for(var i=0; i<this.length-1; i++) {
   this[i] = this[i + 1];
  }
  this.length--;
  return o;
 }
}, false);

Object.extend(String.prototype, {
 trimLeft: function() {
  return this.replace(/^\s*/,"");
 },
 trimRight: function() {
  return this.replace(/\s*$/,"");
 },
 trim: function() {
  return this.trimRight().trimLeft();
 },
 endsWith: function(s) {
  if(this.length == 0 || this.length < s.length) { return false; }
  return (this.substr(this.length - s.length) == s);
 },
 startsWith: function(s) {
  if(this.length == 0 || this.length < s.length) { return false; }
  return (this.substr(0, s.length) == s);
 },
 split: function(c) {
  var a = [];
  if(this.length == 0) return a;
  var p = 0;
  for(var i=0; i<this.length; i++) {
   if(this.charAt(i) == c) {
    a.push(this.substring(p, i));
    p = ++i;
   }
  }
  a.push(s.substr(p));
  return a;
 }
}, false);

Object.extend(String, {
 format: function(s) {
  for(var i=1; i<arguments.length; i++) {
   s = s.replace("{" + (i -1) + "}", arguments[i]);
  }
  return s;
 },
 isNullOrEmpty: function(s) {
  if(s == null || s.length == 0) {
   return true;
  }
  return false;
 }
}, false);

if(typeof addEvent == "undefined")
 addEvent = function(o, evType, f, capture) {
  if(o == null) { return false; }
  if(o.addEventListener) {
   o.addEventListener(evType, f, capture);
   return true;
  } else if (o.attachEvent) {
   var r = o.attachEvent("on" + evType, f);
   return r;
  } else {
   try{ o["on" + evType] = f; }catch(e){}
  }
 };

if(typeof removeEvent == "undefined")
 removeEvent = function(o, evType, f, capture) {
  if(o == null) { return false; }
  if(o.removeEventListener) {
   o.removeEventListener(evType, f, capture);
   return true;
  } else if (o.detachEvent) {
   o.detachEvent("on" + evType, f);
  } else {
   try{ o["on" + evType] = function(){}; }catch(e){}
  }
 };

[Struppi]

.bind ist eine Methode aus dem Objekt Prototypen der ajaxpro DLL

bind: function(o) {
  if(!Function.__objs) {
   Function.__objs = [];
   Function.__funcs = [];
  }
  var objId = o.__oid;
  if(!objId) {
   Function.__objs[objId = o.__oid = Function.__objs.length] = o;
  }

var me = this;
  var funcId = me.__fid;
  if(!funcId) {
   Function.__funcs[funcId = me.__fid = Function.__funcs.length] = me;
  }

if(!o.__closures) {
   o.__closures = [];
  }

var closure = o.__closures[funcId];
  if(closure) {
   return closure;
  }

o = null;
  me = null;

return Function.__objs[objId].__closures[funcId] = function() {
   return Function.__funcs[funcId].apply(Function.__objs[objId], arguments);
  };
}
}, false);

tut mir leid das versteh ich nicht und ob die Funktion das macht was du willst, die Frage ist gibt es Fehlermeldung? Es gibt keine Funktion onCellKeyDown() in deinem Beispiel.

Struppi.

[Stephan]

Hallo Struppi,
die Funktion __onCellKeyDown() ist ein Mitglied aus meinem eigenen Objekt (objTable) welches den Aufbau und die Steuerung einer HTML Table übernimmt (Teil des 1. Postings). Hatte testweise eine eigenständige Funktion  onCellKeyDown() erstellt und auf herkömmliche weise gebunden also
cell.onkeydown = onCellKeyDown;
Leider ebenfalls ohne erfolg. onmousedown, onmouseup, ondblclick laufen auch unter FireFox. onkeydown geht wie gesagt auch unter IE und Opera.
Es gibt keine Fehlermeldung. Das Event wird schlicht nicht ausgelöst. Ich glaube nicht das etwas mit dem Code nicht stimmt, da die anderen Events funktionieren. Ich befürchte das die Table, welche zur Laufzeit generiert wird, unter FireFox keine Keyboardkommandos empfängt.

Hier noch mal ein extrakt der relevanten Zeilen:
__onCellKeyDown: function(e){
    if (!e) e = window.event;
    if (e){
        var keyCode=(e.keyCode)? e.keyCode: e.charCode;
        if (!isNull(keyCode))alert(keyCode);
    }
    return false;
},
...
//Zuweisung der Events...
cell.onmousedown = this.__onCellMouseDown.bind(cell);
cell.onmouseup = this.__onCellMouseUp.bind(cell);
cell.ondblclick = this.__onCellDblClick.bind(cell);
cell.onkeydown = this.__onCellKeyDown.bind(cell);

ein Neues Object erstelle ich wie folgt:
var objNAME = Class.create();
Object.extend(objNAME.prototype, {
    // *************************************************************
    // * Private Events
    // *************************************************************
    // *************************************************************
    // * Private Functions
    // *************************************************************
    // *************************************************************
    // * Public Functions
    // *************************************************************
    // *************************************************************
    // * Public Properties
    // *************************************************************
    // *************************************************************
    // * Contstructor
    // *************************************************************
initialize: function() {
    }
});

Gruß,
Stephan.

tut mir leid das versteh ich nicht und ob die Funktion das macht was du willst, die Frage ist gibt es Fehlermeldung? Es gibt keine Funktion onCellKeyDown() in deinem Beispiel.

Struppi.

[Struppi]

Leider ebenfalls ohne erfolg. onmousedown, onmouseup, ondblclick laufen auch unter FireFox. onkeydown geht wie gesagt auch unter IE und Opera.
Es gibt keine Fehlermeldung. Das Event wird schlicht nicht ausgelöst. Ich glaube nicht das etwas mit dem Code nicht stimmt, da die anderen Events funktionieren. Ich befürchte das die Table, welche zur Laufzeit generiert wird, unter FireFox keine Keyboardkommandos empfängt.

Das ist mir vorher gar nicht aufgefallen, aber wie empfängt eine Tabellenzelle einen keydown Event?

Struppi.

[Stephan]

Verstehe die Frage nichjt ganz...
Automatisiert über den Browser...
Hab mal weiter probiert. Die Zelle erhält unter FireFox den Focus nicht . Deswegen kein FireEvent unter FF :(.
Gibt es ein HTML Porperty welches bestimmt, ob ein Object den Focus bekommen kann?
Ich setzte den Focus nach Click mit cell.focus();

Testcode
function onKeyDown(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName == "TD") {
        alert(e.keyCode);
    }
}
document.onkeydown = onKeyDown;

Nach Klick auf eine Zelle und drücken einer taste ist unter FireFox target=html und nicht das CellObject :(
Normalerweise habe mehr Probs mit dem IE :(

Gruß,
Stephan.

[JürgenB]

Hallo Stephan,

cell.onmousedown = this.__onCellMouseDown.bind(cell);
cell.onmouseup = this.__onCellMouseUp.bind(cell);
cell.ondblclick = this.__onCellDblClick.bind(cell);
cell.onkeydown = onCellKeyDown.bind(cell);

so weist Du den Eventhandlern die Rückgabewerte der Funktionen zu. Lass mal das "(cell)" weg. Eventzuweisungen gehen so:

function mausrunter(e) {...}

xxx.onmousedown=mausrunter;

Gruß, Jürgen

[Stephan]

Hallo Jürgen,
das habe ich schon alles ausprobiert. Daher ist der Fehler im Snippet entstanden.
Das .bind kommt daher weil ich die AjaxPro Dll unter ASP.Net verwende. Auf diese weise kann man mit dem Objekt Prototypen Events an Objekte binden. Das hat zur Folge, das ich im FunctionEventHandler this als cell verwenden kann. So einfach ist es leider nicht :(.
Wie gesagt funkioniert alles super unter IE und Opera.

Hab schon überlegt als Notlösung alles im document onkeydown zu handeln. Dafür benötige ich aber ein Lostfocus event für die Table. Ein GotFocus kriege ich ja noch in aber...

Gruß,
Stephan

Hallo Stephan,

cell.onmousedown = this.__onCellMouseDown.bind(cell);
cell.onmouseup = this.__onCellMouseUp.bind(cell);
cell.ondblclick = this.__onCellDblClick.bind(cell);
cell.onkeydown = onCellKeyDown.bind(cell);

so weist Du den Eventhandlern die Rückgabewerte der Funktionen zu. Lass mal das "(cell)" weg. Eventzuweisungen gehen so:

function mausrunter(e) {...}

xxx.onmousedown=mausrunter;

Gruß, Jürgen