Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML

Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML

Secara default pada saat mengisi form input html kita tidak bisa menggunakan tombol panah atas bawah pada keyboard sebagai gantinya kita hanya bisa menggunakan tombol tab atau menggunakan kursor mouse, tetapi kendati demikian kita bisa saja diminta agar bisa menggunakan tombol panah atas bawah pada keyboard pada saat mengisi formulir html.

Berikut ini adalah Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML

Disini kita hanya perlu menambahkan sedikit bantuan javascript kemudian mememanggilnya dengan cara ditambahkan kedalam class. Contohnya seperti berikut

<!DOCTYPE html>
<html>
<head>
	<title>Mengaktifkan tombol panah atas bawah root93</title>
</head>
<body>
<form>
<h4>Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML - ROOT93</h4>
<br/>
<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable">
</form>
</body>
<script type="text/javascript">
	var elements = document.getElementsByClassName("arrow-togglable");
    var currentIndex = 0;

    document.onkeydown = function(e) {
      switch (e.keyCode) {
        case 38:
          currentIndex = (currentIndex == 0) ? elements.length - 1 : --currentIndex;
          elements[currentIndex].focus();
          break;
        case 40:
          currentIndex = ((currentIndex + 1) == elements.length) ? 0 : ++currentIndex;
          elements[currentIndex].focus();
          break;
      }
    };
</script>
</html>


0 Response to "Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML"

Post a Comment

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...