[trick] Membuat Auto Tab Text-Field dengan Javascript

Bismillah..

Ok Langsung Saja

Pernah Mengisi form yang ada no telphon yang berisi 3 text-field kan agan-agan sekalian.  3 textfield itu otomatis pindah ke textfield selanjutnya ketika textfield pertama sudah melewati batas.

kira-kira bagaimana skripnya ya. ok saya tidak berlama-lama bisa langsung liat code diabawah :


<HTML>
<HEAD>
<TITLE>AUTO TAB TEXT-FIELD</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function autoTab(input,len, e) {
var keyCode = (isNN) ? e.which : e.keyCode;
var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
if(input.value.length >= len && !containsElement(filter,keyCode)) {
input.value = input.value.slice(0, len);
input.form[(getIndex(input)+1) % input.form.length].focus();
}
function containsElement(arr, ele) {
var found = false, index = 0;
while(!found && index < arr.length)
if(arr[index] == ele)
found = true;
else
index++;
return found;
}
function getIndex(input) {
var index = -1, i = 0, found = false;
while (i < input.form.length && index == -1)
if (input.form[i] == input)index = i;
else i++;
return index;
}
return true;
}

</script>
</HEAD>

<BODY>

<center>
<form>
<table>
<tr>
<td>NO TELPON : <br>
0 - (
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small>) -
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small> -
<small><input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4"></small>
</td>
</tr>
<tr>
<td>SECURITY KODE : <br>
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small> -
<small><input onKeyUp="return autoTab(this, 2, event);" size="3" maxlength="2"></small> -
<small><input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4"></small>
</td>
</tr>
</table>
</form>
</center>
<BODY>
</HTML>

dan hasilnya seperti ini

auto_tab

mudah bukan . silahkan berexplorasi ya.

 

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: