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>

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Cara Mengaktifkan Tombol Panah Atas Bawah pada Form Input HTML

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

Post a Comment