时间戳

首页 > 解决方案 > Javascript：在输入中重新映射键盘

javascript - Javascript：在输入中重新映射键盘

问题描述

我发现了一些与该主题相关的主题，但我似乎无法弄清楚我的错误。当在输入字段中按下 arrowDown 时，我想将 arrowDown 按钮重新映射到 Tab 按钮。*edit3：这样我就可以关注/更改到下一个输入字段。我想通过 arrowDown-btn 浏览这些输入。

根据我的发现，我到了这一点：

    $("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) 似乎不起作用。我想我误解了触发特定按钮的概念。

EDIT1（基于评论中的建议）：

    $("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;
    }
});

是一种稍微不同的方法，但是当我按下箭头时，制表符没有被按下。

EDIT2：这不仅仅是制表按钮，我不能用这个设置触发任何键。

    $("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：我制作了一个带有描述问题的演示片段。

EDIT5（已解决）：我使用How do I move focus to next input with jQuery解决了这个问题？ 无论出于何种原因，通过按键触发制表器似乎都不起作用。我很感激进一步的澄清。对我来说诀窍是：

    $(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();
        }
    });
});

标签： javascripttriggerskeykeydownremap

解决方案

推荐阅读