I found some threads related to this topic but I can't seem to figure out my err. I want to remap the arrowDown Button to the Tab-Button, when arrowDown is pressed in a input-field. *edit3: So that I can focus/change to the next input field. I'd like to navigate through those inputs via the arrowDown-btn.
Based on what I found, I got to this point:
$("input").keyup(function (e) {
var keyCode = e.keyCode;
if (keyCode === 40) {
var k = jQuery.Event("keydown");
k.which = 50;
$(this).trigger(k);
} else {
alert("Wrong Key.");
}
});
$(this).trigger(k) doesn't seem to work. I think I misunderstood the concept of triggering a specific button.
EDIT1 (based on suggestion in comments):
$("input").bind("keydown", function (e) {
if (e.keyCode === 40) { //if this is enter key
e.preventDefault();
var newE = $.Event("keyup");
newE.keyCode = 9;
$(this).trigger(newE);
return true;
}
else {
return true;
}
});
is a slighty different approach but still, the tabulator is not pressed when I press arrowDown.
EDIT2: It's not just the tabulator button, I can't trigger any key with this setup.
$("input").keyup(function (e) {
var keyCode = e.keyCode;
if (keyCode === 40) {
e.preventDefault();
var newE = $.Event("keydown");
newE.keyCode = 60;
$(this).trigger(newE);
} else {
alert("Oh no you didn't.");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Remapping Keys</title>
</head>
<body>
<div id="Deutsch" class="card h-auto w-fitContent mt-3">
<div class="card-header sub-header">
<a><h4>Deutsch<br></h4></a></div>
<div class="card-body pr-3"><table><tbody><tr>
<td></td><input type="hidden" id="titel5" value="1.01 - Pausenspiele"><td class="pr-2 font-weight-light">
<table>
<tbody><tr>
<td>1.01</td>
<td>-</td>
<td>Pausenspiele</td>
</tr>
</tbody></table>
</td><td class="pl-1">
<input type="text" class="" id="aufg5" name="DL3419" value="3" size="2" maxlength="2">
<span class="ml-1"><code style="color:#12AC14; font-size:11pt; "> <b> </b> </code></span></td></tr>
<tr>
<td></td><input type="hidden" id="titel6" value="1.02 - Pausenspiele"><td class="pr-2 font-weight-light">
<table>
<tbody><tr>
<td>1.02</td>
<td>-</td>
<td>Pausenspiele</td>
</tr>
</tbody></table>
</td><td class="pl-1">
<input type="text" class="" id="aufg6" name="DL3420" value="4" size="2" maxlength="2">
<span class="ml-1"><code style="color:#12AC14; font-size:11pt; "> <b> </b> </code></span></td></tr>
<tr>
<td></td><input type="hidden" id="titel7" value="1.03 - Pausenspiele"><td class="pr-2 font-weight-light">
<table>
<tbody><tr>
<td>1.03</td>
<td>-</td>
<td>Pausenspiele</td>
</tr>
</tbody></table>
</td><td class="pl-1">
<input type="text" class="" id="aufg7" name="DL3421" value="3" size="2" maxlength="2">
<span class="ml-1"><code style="color:#12AC14; font-size:11pt; "> <b> </b> </code></span></td></tr>
</tbody></table></div></div>
</body>
</html>EDIT4: I made a demo-snippet w/ described problem.
EDIT5 (SOLVED): I solved the issue using How do I move focus to next input with jQuery? Triggering the tabulator via keypress doesn't seem to work for whatever reasons. I'd appreciate further clarifications. What did the trick for me was :
$(function() {
var focusables = $(":input:not([type=hidden])");
focusables.keyup(function(e) {
var maxchar = false;
if (e.keyCode === 40) {
var current = focusables.index(this),
next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
console.log(next);
next.focus();
}
});
});
