GuHSNet, essa funcionalidade geralmente é implementada com uma verificação de quantos caracteres a pessoa já inseriu no input, crusando com uma verificação de caracteres máximos necessários. Por exemplo: Você coloca um campo de CEP no furmulário. Todo CEP, por padrão, possui 8 números. Sendo assim podemos adicionar um verificador:
<!-- Este seria o input para inseção do CEP -->
CEP: <input type='text' maxlength='8' id='ipt_cep' />
<!-- Este seria o próximo input a ser selecionado, um número de casa, por exemplo -->
Número: <input type="text" id="ipt_num" />
<!-- A parte javascript -->
<script type="text/javascript">
// <![CDATA[
/** O input em questão **/
var oIpt = document.getElementById('ipt_cep');
/** Em quantos caracteres o próximo input será selecionado **/
oIpt.CHANGE_LENGTH = 8;
/** Próximo campo, o que será selecionado após o CEP ser inserido **/
oIpt.oNextField = document.getElementById('ipt_num');
/** Função para monitorar a quantidade de caracteres **/
oIpt.onkeyup = function() {
if(this.value.length == this.CHANGE_LENGTH) {
this.oNextField.focus();
}
}
/** Função para checar se o usuário pressionou um número **/
oIpt.onkeydown = function(oEvent) {
// Fix para IE
oEvent = oEvent || window.event;
// Código ASCII da tecla pressionada
var iKeyCode = oEvent.keyCode;
// Checagem se não é número, nem espaço ou backspace
if(iKeyCode != 46 && iKeyCode != 8 && (iKeyCode < 48 || iKeyCode > 57) && (iKeyCode < 96 || iKeyCode > 105)) {
return false;
}
}
// ]]>
</script>
onkeyup: Usei na verificação de quantos caracteres já existem no input por ser disparado após o caractere ser adicionado. onkeydown: Usei na verificação de que tecla foi pressionada pois é disparado antes do caractere ser adicionado Usei o exemplo do CEP pois é algo que tem sua quantidade de caracteres sempre igual (8), por isso foi possível monitorar a hora de passar para o próximo campo. O mesmo não poderia ser feito com um campo para a inserção do nome da pessoa, por exemplo, por não haver como saber o tamanho deste.
