Focador //Repositório JavaScript

Descrição

Extende elementos incapazes de receber foco, permitindo que eles passem a responder aos eventos keypress, keydown, keyup, blur e focus.
Criado: 2006.02.14 - Modificado 2013.09.17

Dependências

General » Manipulador de Eventos

Código (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/focuser [rev. #3]

focuser = function(o){
    var x, $ = document.body.appendChild(document.createElement("input")), s = $.style,
    h = function(e){(o["on" + e.type] instanceof Function) && o["on" + e.type].call(o, e.key);};
    $.type = "text", s.position = "absolute", s.left = s.top = "-100px";
    o.blur = function(){$.blur();}, addEvent(o, "click", o.focus = function(){$.focus();});
    for(x in {keypress: 0, keydown: 0, keyup: 0, blur: 0, focus: 0}) addEvent($, x, h);
};

Exemplo (Exemplo)

<style type="text/css">
#type{
    background: #eef;
    border: 2px inset #999;
    overflow: auto;
    padding: 30px;
    margin: 30px;
    width: 200px;
}
</style>

<div id="type">
<b>Click and type to edit</b> the &lt;div&gt;. Press TAB or click "out" to test the focus.
<i>The objective of this example isn't to edit, but test the "focus" and "key" events.</i>
</div>

<script type="text/javascript">
//<![CDATA[

var t = document.getElementById("type");
focuser(t);
t.onfocus = function(){
    this.style.background = "#fee";
};
t.onblur = function(){
    this.style.background = "#eef";
};
t.onkeypress = function(k){
    var s = this.innerHTML;
    this.innerHTML = k == 8 ? s.slice(0, -1) : s + String.fromCharCode(k);
};

//]]>
</script>

Ajuda

focuser(object: HTMLElement): void

Torna o campo focável.

object: elemento de referência

Após a chamada da função, o elemento vai conter os seguintes eventos e métodos:

Eventos

Elemento.onkeypress: Function(key: Integer): void

Ocorre quando uma tecla é pressionada, pode ser chamada várias vezes enquanto a tecla é mantida pressionada.

key: código da tecla pressionada

Elemento.onkeydown: Function(key: Integer): void

Ocorre quando a tecla é pressionada.

key: código da tecla pressionada

Elemento.onkeyup: Function(key: Integer): void

Ocorre quando a tecla é solta.

key: código da tecla pressionada

Elemento.onfocus: Function(void): void

Ocorre quando o elemento ganha foco.

Elemento.onblur: Function(void): void

Ocorre quando o elemento perde o foco.

Métodos

Elemento.focus(void): void: Foca o elemento.
Elemento.blur(void): void: Remove o foco do elemento.

JSFromHell.com