Apa sih Enter lost focus Form field itu? adalah sebuah event yang dijalankan ketika kalian menekan tombol enter pada keyboard akan merubah posisi focus pada field lainnya. Lost focus field biasanya digunakan pada web Application untuk menggantikan tombol Tab yang biasa digunakan untuk berpindah focus pada form field lain.

Berikut saya beri contoh penerapannya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enter Form</title>
<script type="text/javascript">
function nextfield(event, id){  // fungsi saat tombol enter
    if(event.keyCode == 13 || event.which == 13){ 
        document.getElementById(id).focus();  // Perpindahan focus
    }
}
 
function ajaxRequest(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] // Check ActiveX di Internet Eksplorer
 if (window.ActiveXObject){ //Support for ActiveXObject in Internet Explorer
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    alert('Browser tidak support ajax');
   }
  }
 }
 else if (window.XMLHttpRequest) // jika Mozilla, Safari etc
  return new XMLHttpRequest();
 else
  return false
}
 
function ajaxGet(){
        var postrequest=new ajaxRequest();  // Panggil fungsi ajax Request
        postrequest.onreadystatechange=function(){ 
         if (postrequest.readyState==4){
          if (postrequest.status==200 || window.location.href.indexOf("http")==-1){
           document.getElementById("result").innerHTML=postrequest.responseText  // Respon dari ajax diletakkan pada id result
          }
          else{
           alert("Error, ambil halaman ajax.")
          }
         }
        } 


        var namaValue=encodeURIComponent(document.getElementById("nama").value) ; // Nilai value dari field Nama
        var alamatValue=encodeURIComponent(document.getElementById("alamat").value) ; // NIlai value dari field alamat
        var parameters="name="+namaValue+"&alamat="+alamatValue;  // Nilai post field yang dikirim
        postrequest.open("POST", "proses.php", true);  // panggil file proses.php
        postrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded") ; // Request header default form
        postrequest.send(parameters)  // kirim post
}
 
</script>
</head>
 
<body>
<form action="" method="get" name="form" id="form">
Nama :
<input type="text" name="nama" id="nama" onkeypress="return nextfield(event, 'alamat')" /><br />
Alamat :
<input type="text" name="alamat" id="alamat" onkeypress="return nextfield(event, 'bt')" /><br />
<input type="button" id="bt" onclick="ajaxGet()" value="kirim" />
</form>
        <div id="result"></div>
</body>
</html>

Pada file proses.php isinya :

<?php

echo "Nama anda  ". $_POST['nama']." <br />";

echo "Alamat anda ".$_POST['alamat'];

?>

 

Cukup sederhana script diatas, cara penggunaannya cukup kalian menekan tombol enter untuk perpindah dari field satu ke field lain.

 

Catatan :

- Pada artikel kali ini saya tidak menggunakan Framework jquery