Problema com OnChange, OnBlur e OnFocus

[Fernando Issler]

Olá, sou novo aqui no forum, e precisava de uma super ajuda!

Alguns aqui devem conhecer o Niceform, é um plugin para alterar o visual do formulário...

Bom, se colocarmos em um campo select de um formulário a função onchange, ela simplesmente não funciona.

Não entendo nada de javascript, e vi que no arquivo .js do niceform tem algo que pela lógica parece uma alteração do onchange, onoblur, onfocus, entre outros para el.onchange...

Mas não sei como aplicar isso ao formulário.

O que eu quero é que quando o visitante clique no input nome o valor "Digite aqui seu nome" suma para que seja digitado o nome.

No campo select quando é selecionado o estado, aparece em baixo as cidades.

Vou colocar aqui o código pra vocês darem uma olhada, porque eu não entendo nada. :)

Colocarei o código de forma resumida, se quiserem depois eu coloco o código completo.

<form class="niceform">
        <input type="text" value="Digite seu nome" onblur="if(this.value=='') {this.value='Digite seu nome';}" onfocus="if(this.value=='Digite seu nome') {this.value='';} />
        <select name="estado" onChange="showUser(this.value)">
              <option value="Alagoas">Alagoas</option>
              <option value="Bahia">Bahia</option>
              <option value="São Paulo">São Paulo</option>
              <option value="Rio de Janeiro">Rio de Janeiro</option>
              <option value="Rondônia">Rondônia</option>
        </select>
        <div id="cidadesajax"><b>Selecione seu estado.</b></div>
</form>

function inputFile(el) { //extend File inputs
    el.oldClassName = el.className;
    el.dummy = document.createElement('div');
    el.dummy.className = "NFFile";
    el.file = document.createElement('div');
    el.file.className = "NFFileNew";
    el.center = document.createElement('div');
    el.center.className = "NFTextCenter";
    el.clone = document.createElement('input');
    el.clone.type = "text";
    el.clone.className = "NFText";
    el.clone.ref = el;
    el.left = document.createElement('img');
    el.left.src = imagesPath + "0.png";
    el.left.className = "NFTextLeft";
    el.button = document.createElement('img');
    el.button.src = imagesPath + "0.png";
    el.button.className = "NFFileButton";
    el.button.ref = el;
    el.button.onclick = function() {this.ref.click();}
    el.init = function() {
        var top = this.parentNode;
        if(this.previousSibling) {var where = this.previousSibling;}
        else {var where = top.childNodes[0];}
        top.insertBefore(this.dummy, where);
        this.dummy.appendChild(this);
        this.center.appendChild(this.clone);
        this.file.appendChild(this.center);
        this.file.insertBefore(this.left, this.center);
        this.file.appendChild(this.button);
        this.dummy.appendChild(this.file);
        this.className = "NFhidden";
        this.relatedElement = this.clone;
    }
    el.unload = function() {
        this.parentNode.parentNode.appendChild(this);
        this.parentNode.removeChild(this.dummy);
        this.className = this.oldClassName;
    }
    el.onchange = el.onmouseout = function() {this.relatedElement.value = this.value;}
    el.onfocus = function() {
        this.left.className = "NFTextLeft NFh";
        this.center.className = "NFTextCenter NFh";
        this.button.className = "NFFileButton NFh";
    }
    el.onblur = function() {
        this.left.className = "NFTextLeft";
        this.center.className = "NFTextCenter";
        this.button.className = "NFFileButton";
    }
    el.onselect = function() {
        this.relatedElement.select();
        this.value = '';
    }
}
function textarea(el) { //extend Textareas
    el.oldClassName = el.className;
    el.height = el.offsetHeight - textareaTopPadding;
    el.width = el.offsetWidth - textareaSidePadding;
    el.topLeft = document.createElement('img');
    el.topLeft.src = imagesPath + "0.png";
    el.topLeft.className = "NFTextareaTopLeft";
    el.topRight = document.createElement('div');
    el.topRight.className = "NFTextareaTop";
    el.bottomLeft = document.createElement('img');
    el.bottomLeft.src = imagesPath + "0.png";
    el.bottomLeft.className = "NFTextareaBottomLeft";
    el.bottomRight = document.createElement('div');
    el.bottomRight.className = "NFTextareaBottom";
    el.left = document.createElement('div');
    el.left.className = "NFTextareaLeft";
    el.right = document.createElement('div');
    el.right.className = "NFTextareaRight";
    el.init = function() {
        var top = this.parentNode;
        if(this.previousSibling) {var where = this.previousSibling;}
        else {var where = top.childNodes[0];}
        top.insertBefore(el.topRight, where);
        top.insertBefore(el.right, where);
        top.insertBefore(el.bottomRight, where);
        this.topRight.appendChild(this.topLeft);
        this.right.appendChild(this.left);
        this.right.appendChild(this);
        this.bottomRight.appendChild(this.bottomLeft);
        el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
        el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
        this.className = "NFTextarea";
    }
    el.unload = function() {
        this.parentNode.parentNode.appendChild(this);
        this.parentNode.removeChild(this.topRight);
        this.parentNode.removeChild(this.bottomRight);
        this.parentNode.removeChild(this.right);
        this.className = this.oldClassName;
        this.style.width = this.style.height = "";
    }
    el.onfocus = function() {
        this.topLeft.className = "NFTextareaTopLeft NFh";
        this.topRight.className = "NFTextareaTop NFhr";
        this.left.className = "NFTextareaLeftH";
        this.right.className = "NFTextareaRightH";
        this.bottomLeft.className = "NFTextareaBottomLeft NFh";
        this.bottomRight.className = "NFTextareaBottom NFhr";
    }
    el.onblur = function() {
        this.topLeft.className = "NFTextareaTopLeft";
        this.topRight.className = "NFTextareaTop";
        this.left.className = "NFTextareaLeft";
        this.right.className = "NFTextareaRight";
        this.bottomLeft.className = "NFTextareaBottomLeft";
        this.bottomRight.className = "NFTextareaBottom";
    }
}
function selects(el) { //extend Selects
    el.oldClassName = el.className;
    el.dummy = document.createElement('div');
    el.dummy.className = "NFSelect";
    el.dummy.style.width = el.offsetWidth + 'px';
    el.dummy.ref = el;
    el.left = document.createElement('img');
    el.left.src = imagesPath + "0.png";
    el.left.className = "NFSelectLeft";
    el.right = document.createElement('div');
    el.right.className = "NFSelectRight";
    el.txt = document.createTextNode(el.options[0].text);
    el.bg = document.createElement('div');
    el.bg.className = "NFSelectTarget";
    el.bg.style.display = "none";
    el.opt = document.createElement('ul');
    el.opt.className = "NFSelectOptions";
    el.dummy.style.left = findPosX(el) + 'px';
    el.dummy.style.top = findPosY(el) + 'px';
    el.opts = new Array(el.options.length);
    el.init = function(pos) {
        this.dummy.appendChild(this.left);
        this.right.appendChild(this.txt);
        this.dummy.appendChild(this.right);
        this.bg.appendChild(this.opt);
        this.dummy.appendChild(this.bg);
        for(var q = 0; q < this.options.length; q++) {
            this.opts[q] = new option(this.options[q], q);
            this.opt.appendChild(this.options[q].li);
            this.options[q].lnk.onclick = function() {
                this._onclick();
                this.ref.dummy.getElementsByTagName('div')[0].innerHTML = this.ref.options[this.pos].text;
                this.ref.options[this.pos].selected = "selected";
                for(var w = 0; w < this.ref.options.length; w++) {this.ref.options[w].lnk.className = "";}
                this.ref.options[this.pos].lnk.className = "NFOptionActive";
            }
        }
        if(this.options.selectedIndex) {
            this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[this.options.selectedIndex].text;
            this.options[this.options.selectedIndex].lnk.className = "NFOptionActive";
        }
        this.dummy.style.zIndex = 999 - pos;
        this.parentNode.insertBefore(this.dummy, this);
        this.className = "NFhidden";
    }
    el.unload = function() {
        this.parentNode.removeChild(this.dummy);
        this.className = this.oldClassName;
    }
    el.dummy.onclick = function() {
        var allDivs = document.getElementsByTagName('div'); for(var q = 0; q < allDivs.length; q++) {if((allDivs[q].className == "NFSelectTarget") && (allDivs[q] != this.ref.bg)) {allDivs[q].style.display = "none";}}
        if(this.ref.bg.style.display == "none") {this.ref.bg.style.display = "block";}
        else {this.ref.bg.style.display = "none";}
        if(this.ref.opt.offsetHeight > selectMaxHeight) {
            this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthScroll + 33 + 'px';
            this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthScroll + 'px';
        }
        else {
            this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthSimple + 33 + 'px';
            this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthSimple + 'px';
        }
    }
    el.bg.onmouseout = function(e) {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
        if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
        else{this.style.display = "none";}
    }
    el.dummy.onmouseout = function(e) {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
        if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
        else{this.ref.bg.style.display = "none";}
    }
    el.onfocus = function() {this.dummy.className += " NFfocused";}
    el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
    el.onkeydown = function(e) {
        if (!e) var e = window.event;
        var thecode = e.keyCode;
        var active = this.selectedIndex;
        switch(thecode){
            case 40: //down
                if(active < this.options.length - 1) {
                    for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
                    var newOne = active + 1;
                    this.options[newOne].selected = "selected";
                    this.options[newOne].lnk.className = "NFOptionActive";
                    this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
                }
                return false;
                break;
            case 38: //up
                if(active > 0) {
                    for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
                    var newOne = active - 1;
                    this.options[newOne].selected = "selected";
                    this.options[newOne].lnk.className = "NFOptionActive";
                    this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
                }
                return false;
                break;
            default:
                break;
        }
    }
}

Editado Abril 15, 2011 por Fernando Issler