TextBox Fokus untuk Form dengan Menggunakan Arah Pada Keyboard

 Author : hadinug, 13 June, 2014, Komentar

form kasir


Ada yang bertanya bagaimana membuat textbox focus pada form dengan Keyboard arah[kiri,kanan, atas dan bawah] pada kami. Sebenarnya ini sangatlah mudah, teman-teman bisa membuat aplikasi web selayaknya aplikasi desktop yang menggunakan arah pada form inputan, sehingga meminimalisir penggunaan mouse.


Tentang Logik.

Logika nya sangat sederhana, diawal, pada elemen form input yang berisi sebuah tabel kita tambahkan sebuah attribut tabindex untuk masing-masing elemen input baik berupa text box, select, maupun textarea yang beraturan:



t.each(function(i, el) {
                $(el).attr('tabindex', parseInt(i + 1));
            });


Kemudian pada elemen table atau form definisikan sebuah attribut yang nantinya akan kita jadikan sebuah parameter:

  1. data-tabindex="true", menyatakan bahwa inputan textbox pada elemen yang berada didalamnya akan dikenakan event, fokus dengan menggunakan tobol arah pada keyboard.
  2. data-coll="3", jumlah kolom yang digunakan sebagai parameter kelipatan.

Keycode.js

Implementasi dari logik diatas, dituliskna pada script berikut:

!function($) {
    $(function() {
        $('html').on('hover', '[data-tabindex="true"]', function(e) {
            var col = ($(this).attr('data-coll')) ? $(this).attr('data-coll') : 1;
            var t = $(this).find('input:not([type="hidden"],[readonly]),textarea');
            setInterval(function() {
                t.each(function(i, el) {
                    $(el).attr('tabindex', parseInt(i + 1));
                });
            }, 1000);
            t.on("keydown", function(e) {
                var current = $(this).attr('tabindex');
                (e.keyCode) ? key = e.keyCode : key = e.which;
                switch (key) {
                    case 37:
                        next = current - 1;
                        break; 		//left
                    case 38:
                        next = current - col;
                        break; 		//up
                    case 39:
                        next = (1 * current) + 1;
                        break; 	//right
                    case 40:
                        next = (1 * current) + col;
                        break; 	//down
                }

                function cursor() {
                    if ($('input[tabindex="' + next + '"]').length > 0) {
                        $('input[tabindex="' + next + '"]').focus().css({
                            'background': 'rgb(228, 250, 228)'
                        });
                    } else {
                        $('textarea[tabindex="' + next + '"]').focus().css({
                            'background': 'rgb(228, 250, 228)'
                        });
                    }
                }
                if (key === 37 | key === 38 | key === 39 | key === 40) {
                    $('input, textarea').removeAttr('style');
                    var attr = $('input[tabindex="' + next + '"]').attr('autocomplete');
                    if (typeof attr !== 'undefined' && attr !== false) {
                        if (key === 37 | key === 39) {
                            cursor();
                        }
                    } else {
                        cursor();
                    }
                    current = next;
                }

            });
        });
    });
}(window.$);
 

Lihat, dia awal script akan membaca pada halam HTML dan mengidentifikasi elemen yang memiliki attribut [data-tabindex="true"].

Implementasi

Untuk lebih memahami apa yang menjadi maksud kami diatas, langsung saja cobakan ke dalam sebuah halaman website yang berisi form textbox:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery TextBox Focus dengan Keyboard</title>
        <script type="text/javascript" src="jquery.min.1.7.2.js"></script>
        <script type="text/javascript" src="keycode.js"></script>
    </head>
    <body>
        <form>
            <table data-tabindex="true" data-coll="3">
                <tr>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="text">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


Kesimpulan

Anda sudah mempelajari bagaiman membuat sebuah aplikasi form yang meminimalisir penggunaan mouse, hanya dengan menggunakan keyboard. Untuk demonya silahkan lihat disini


 
Bagikan halaman ke sosial media
 
Tags :   key-code    jquery       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda