[JS] detectKey functie wordt niet aan textarea gebonden?

[Reveller]

Ik probeer een scriptje te schrijven dat elke textarea van een bepaalde class omzet naar een soort UBB editor voor binnen mijn CMS. Ik ben nu zover dat alle textarea's in een pagina worden bekeken en zonodig worden vervangen door een editor-div. Volgende op de lijst: een detectKey functie aan die textarea's hangen.

De bedoeling: als ik in een textarea met class "form-textarea" iets intik, wil ik op elke onkeydown zien welke key ik intik, zodat ik hier vervolgens functies aan kan hangen.

Geprobeerd: op diverse manieren in regel 27 geprobeerd om de detectKey te attachen aan de textEditor (this.textarea.detectKey, this.detectKey, etc.)

Resultaat: als ik in de textarea iets intik, gebeurt er niets.

Wat doe ik verkeerd?

JavaScript:

var Editor = {
  version : "1.0 beta",
   
  init : function() {
    var textareaNodes = document.getElementsByTagName('textarea');
    var theTextareas = [], thisTextarea, i = 0;
    i = 0; 
    while ((thisTextarea = textareaNodes[i++])) {
      if (hasClass(thisTextarea, 'form-textarea')) {
        new this.textEditor(thisTextarea);
      }
    }
  },
  
  textEditor : function(textarea) {
    var parent = textarea.parentNode, nextsibling = textarea.nextSibling;
    var container = createNode('div', {'class' : 'textEditor ' + textarea.id});
    this.textarea = parent.removeChild(textarea);
    this.textarea.className = 'editor-textarea'
    container.appendChild(this.textarea);
    if (nextsibling) {
      parent.insertBefore(container, nextsibling);
    }
    else {
      parent.appendChild(container);
    }
    this.textarea.detectKey;
    this.textarea.focus();
  },
  
  detectKey : function() {
    var theHandler = this.handleKey;
    if (document.all) {
      this.textarea.onkeydown = function(e) {
        theHandler.call(self, e);
      }
    }
    else {
      this.textarea.onkeypress = function(e) {
        theHandler.call(self, e);
      }
    }
  },
  
  handleKey : function(e) {
    if (!e || e == null) var e = window.event;
    if (e.keyCode) key = e.keyCode;
    else if (e.which) key = e.which - 32;
    alert(key);
  }
}

addLoadEvent(function () {
    Editor.init();
});

[Bozozo]

this.textarea.detectKey; moet volgens mij this.textarea.detectKey(); zijn.

Verder kan dit stukje

JavaScript:

    if (nextsibling) {
      parent.insertBefore(container, nextsibling);
    }
    else {
      parent.appendChild(container);
    } 

in één keer met de replaceChild functie.

[Reveller]

Bozozo schreef op zaterdag 10 mei 2008 @ 22:27:
this.textarea.detectKey; moet volgens mij this.textarea.detectKey(); zijn.

JavaScript:

this.detectKey();         //is not a function
this.textarea.detectKey() //is not a function
this.textarea.detectKey;  // geen error, maar er gebeurt niets
this.detectKey;           // geen error, maar er gebeurt niets

Verder kan dit stukje

JavaScript:

    if (nextsibling) {
      parent.insertBefore(container, nextsibling);
    }
    else {
      parent.appendChild(container);
    } 

in één keer met de replaceChild functie.

Dat ga ik eens bekijken

[apokalypse]

_{Offtopic:
Waarom UBB, waarom geen wikitext. Ik ben echt helemaal gecharmeerd van deze simpele aanpak van wikitext.}

Duidelijk vraagstelling met die kopjes

[Reveller]

apokalypse schreef op zaterdag 10 mei 2008 @ 22:51:
_{Offtopic:
Waarom UBB, waarom geen wikitext. Ik ben echt helemaal gecharmeerd van deze simpele aanpak van wikitext.}

Wikitext, UBB, HTML, eigen format, dat doet er op dit moment niet toe. Ik wil nu graag weten waarom het niet werkt

[Verwijderd]

Niet getest maar probeer dit eens:

JavaScript:

    this.detectKey.call(textarea);
    this.textarea.focus();
  },
  
  detectKey : function() {
    var theHandler = function(e) {
      if (!e || e == null) var e = window.event;
      if (e.keyCode) key = e.keyCode;
      else if (e.which) key = e.which - 32;
      alert(key);
    };
    
    if (document.all) {
      this.onkeydown = function(e) {
        theHandler.call(self, e);
      }
    }
    else {
      this.onkeypress = function(e) {
        theHandler.call(self, e);
      }
    }
  }

[Reveller]

Verwijderd schreef op zaterdag 10 mei 2008 @ 23:12:
Niet getest maar probeer dit eens:

JavaScript:

    this.detectKey.call(textarea);
    this.textarea.focus();
  },
  
  detectKey : function() {
    var theHandler = function(e) {
      if (!e || e == null) var e = window.event;
      if (e.keyCode) key = e.keyCode;
      else if (e.which) key = e.which - 32;
      alert(key);
    };
    
    if (document.all) {
      this.onkeydown = function(e) {
        theHandler.call(self, e);
      }
    }
    else {
      this.onkeypress = function(e) {
        theHandler.call(self, e);
      }
    }
  }

Firebug:
this.detectKey.call(textarea) has no properties

[Verwijderd]

detectKey is geen eventHandler dus browsers zullen deze in mijn beleving niet triggeren bij onkeypress of onkeydown....
Gewoon een standaard event (zoals keypress) attachen lijkt mij eenvoudiger...

[ Voor 7% gewijzigd door Verwijderd op 11-05-2008 00:09 . Reden: te laat... eigenlijk bed tijd ]

[Verwijderd]

Verwijderd schreef op zondag 11 mei 2008 @ 00:08:
detectKey is geen eventHandler dus browsers zullen deze in mijn beleving niet triggeren bij onkeypress of onkeydown....
Gewoon een standaard event (zoals keypress) attachen lijkt mij eenvoudiger...

De functie detectKey voegt de echte event handlers toe.

[Verwijderd]

Verwijderd schreef op zondag 11 mei 2008 @ 00:29:
[...]


De functie detectKey voegt de echte event handlers toe.

ah... ik zag de call niet naar die functie... (tijd voor bedje, morgen eens kijken...)

[crisp]

Bozozo schreef op zaterdag 10 mei 2008 @ 22:27:
[...]

Verder kan dit stukje

JavaScript:

    if (nextsibling) {
      parent.insertBefore(container, nextsibling);
    }
    else {
      parent.appendChild(container);
    } 

in één keer met de replaceChild functie.

Je bedoelt waarschijnlijk dat je gewoon dit kan doen:

JavaScript:

parent.insertBefore(container, nextsibling);

als nextsibling geen referentie is naar een DOM object zal dit gewoon als het ware hetzelfde als een appendChild doen, de branch is dus niet nodig

Ik denk dat je regel 16 t/m 26 zelfs zou kunnen vervangen door dit:

JavaScript:

this.textarea = textarea;
this.textarea.className = 'editor-textarea';
var container = createNode('div', {'class' : 'textEditor ' + this.textarea.id});
this.textarea.parentNode.insertBefore(container, this.textarea);
container.appendChild(this.textarea);

[ Voor 21% gewijzigd door crisp op 11-05-2008 01:01 ]

[Bozozo]

Nee, er is echt een replaceChild functie. Op de een of andere manier kent niemand die

[crisp]

Bozozo schreef op zondag 11 mei 2008 @ 11:18:
Nee, er is echt een replaceChild functie. Op de een of andere manier kent niemand die

yes I know, maar die is hier imo niet nodig

[Reveller]

crisp schreef op zondag 11 mei 2008 @ 00:53:
[...]
Ik denk dat je regel 16 t/m 26 zelfs zou kunnen vervangen door dit:

JavaScript:

this.textarea = textarea;
this.textarea.className = 'editor-textarea';
var container = createNode('div', {'class' : 'textEditor ' + this.textarea.id});
this.textarea.parentNode.insertBefore(container, this.textarea);
container.appendChild(this.textarea);

Voor zover ik kan nagaan werkt dit idd. hetzelfde, thanks

Ik zou alleen nog heel graag van iemand willen horen waarom ik telkens een foutmelding krijg als ik detectKey aan de textarea wil hangen (zie evt. TS):

JavaScript:

this.detectKey();              // is not a function
this.textarea.detectKey()      // is not a function
this.textarea.detectKey;       // geen error, maar er gebeurt niets
this.detectKey;                // geen error, maar er gebeurt niets
this.detectKey.call(textarea); // has no properties

[Bozozo]

Je maakt verkeerd gebruik van 'this'. Dit is de makkelijkste oplossing:

JavaScript:

            ...
            Editor.detectKey(this.textarea);
            this.textarea.focus();
          },
          
          detectKey : function(ta) {
            var theHandler = this.handleKey;
            if (document.all) {
              ta.onkeydown = function(e) {
                theHandler.call(self, e);
              }
            }
            else {
              ta.onkeypress = function(e) {
                theHandler.call(self, e);
              }
            }
          },

[Reveller]

Bozozo schreef op zondag 11 mei 2008 @ 15:51:
Je maakt verkeerd gebruik van 'this'. Dit is de makkelijkste oplossing:

JavaScript:

            ...
            Editor.detectKey(this.textarea);
            this.textarea.focus();
          },
          
          detectKey : function(ta) {
            var theHandler = this.handleKey;
            if (document.all) {
              ta.onkeydown = function(e) {
                theHandler.call(self, e);
              }
            }
            else {
              ta.onkeypress = function(e) {
                theHandler.call(self, e);
              }
            }
          },

Dank je, maar wat zou dan een goede behandeling van this zijn? Ik dacht toch echt dat ik consequent was? this verwijst telksens naar het object textEditor, dus this.textarea zou de textarea van die editor moeten zijn en this.detectyKey zou moeten verwijzen naar de method detectKey (toch?).

[Bozozo]

ja, maar met this.textarea.detectKey verwijs je dus naar de detectKey method van de textarea... die niet bestaat.

edit: this verwijst naar textarea, niet naar Editor, zoals je met een alert of console.log kunt achterhalen.

[ Voor 33% gewijzigd door Bozozo op 11-05-2008 16:40 ]

[Reveller]

Bozozo schreef op zondag 11 mei 2008 @ 16:35:
ja, maar met this.textarea.detectKey verwijs je dus naar de detectKey method van de textarea... die niet bestaat.

edit: this verwijst naar textarea, niet naar Editor, zoals je met een alert of console.log kunt achterhalen.

Thanks, ik gebruik nu een js-versie van php's print_r om de inhoud van een object te kunnen bekijken. This verwijst idd naar de textarea, zodoende bestaan o.a. this.version, this.detectKey niet.

Ik heb nu onderstaande code, maar krijg een error voor regel 20:

Node cannot be inserted at the specified point in the hierarchy" code: "3

Ik snap deze error niet, want ik zou toch gewoon nodes aan container moeten kunnen appenden? Als ik de textarea in regel 21 append, gaat het wel goed...?

JavaScript:

var Editor = {
  version : "1.0 beta",
   
  init : function() {
    var textareaNodes = document.getElementsByTagName('textarea'), thisTextarea, i = 0;
    while ((thisTextarea = textareaNodes[i++])) {
      if (hasClass(thisTextarea, 'form-textarea')) {
        new this.textEditor(thisTextarea);
      }
    }
  },
  
  textEditor : function(textarea) {
    this.textarea = textarea;
    this.value =  textarea.value.replace(/\s+$/g, "");
    this.textarea.className = 'editor-textarea';
    this.textarea.rows = this.value.split("\n").length;
    var container = createNode('div', {'class' : 'texteditor ' + this.textarea.id}); 
    this.toolbar = Editor.textToolbar;
    container.appendChild(this.toolbar);
    container.appendChild(this.textarea);
    this.textarea.parentNode.insertBefore(container, this.textarea); 
    Editor.detectKey(this.textarea); 
    this.textarea.focus();
  },
  
  detectKey : function(textarea) { 
    var theHandler = this.handleKey;
    if (document.all) textarea.onkeydown = function(e) {theHandler.call(self, e, textarea);} 
    else textarea.onkeypress = function(e) {theHandler.call(self, e, textarea);} 
  }, 
   
  handleKey : function(e, textarea) { 
    if (!e || e == null) var e = window.event; 
    if (e.keyCode) key = e.keyCode; 
    else if (e.which) key = e.which - 32; 
    Editor.growTextarea(textarea);
  },

  growTextarea : function(textarea) {
    var value = textarea.value, newlines = value.split("\n"), i = 0, rows = 1;
    while (newline = newlines[i++]) {
      rows += Math.ceil(newline.length / textarea.cols);
    }
    textarea.rows = rows;
  },
  
  textToolbar : function() {
    str = createNode('input', {'type' : 'checkbox'});
    return str;
  }
}

addLoadEvent(function () {
    Editor.init();
});

/******************************* library functions ****************************/

function addLoadEvent(func) {
  var oldOnload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  }
  else {
    window.onload = function() {
      oldOnload();
      func();
    }
  }
}

function hasClass(el, className) {
  return ( 
    el.className && 
    el.className.match(new RegExp("\\b" + className + "\\b")) 
  ) ? true : false;
}

function createNode(type, options) {
  var el = document.createElement(type);
  for (var key in options) {
    el.setAttribute(key, options[key]);
  }
  return el;
}

[ Voor 48% gewijzigd door Reveller op 12-05-2008 14:32 ]

[Reveller]

Bescheiden * kick *

Zie hierboven; welke DOM guru kan mij helpen?