Как сделать редактируемый event.keyCode
function keydown(event) {
if (event.keyCode == 65) { //key A
thing1();
setTimeout(thing1, speed);
setTimeout(thing2, speed*2);
setTimeout(thing2, speed*2);
setTimeout(thing2, speed*2);
}
Кто-нибудь знает, как сделать event.keyCode редактируемым? Например, вместо того, чтобы говорить, скажем, 65, вы можете сделать его редактируемым с помощью
<div id = "s-keyn-split" class = "setting-row">Split<span class = "setting-option">
<div id = "keybind-split" class = "keybind-setting transitioning clickable">Space</div></span></div>
Такие вещи? Как я могу заставить приведенный выше код выбирать keyCode, когда вы устанавливаете его, скажем, S?
Я бы хотел, чтобы это было что-то вроде этого:
но он редактирует значение keyCode при выборе и нажатии любой клавиши, помещая вместо нее не букву, а номер keyCode.
Обновлено:
Это что-то о кодировании html как дополнения к странице
Я делаю макросы для игры, но если я выпущу ее для общего доступа, мне нужно упростить ее использование.
Другими словами, мне нужна помощь с event.keyCode
У меня есть код, который говорит:
if (event.keyCode == keycode number) {
Then the code of things to do when the key is pressed
}
Поэтому мне было интересно, есть ли способ сделать event.keyCode == (here) редактируемым как var или что-то в этом роде.
В основном создание кликабельной кнопки, при нажатии которой вы можете ввести любую клавишу, и она редактирует keyCode как номер keyCode
и устанавливает его как макрос для действий.
Я знаю, что это возможно, потому что на самом сайте есть макросы, которые вы можете редактировать таким образом,
но с моим скриптом tampermonkey я не могу связать их с теми знаниями, которые у меня есть в HTML и JS.
Я знаю, как это сделать в своем скрипте, но я просто пытался сделать надстройку на странице, чтобы редактировать их со страницы, вместо того, чтобы вручную входить в код для редактирования кода ключа.
@acarlstein Отредактированный пост, может быть более понятным
@WilliamBrand - посмотрите мой ответ, он должен помочь вам получить то, что вы хотите.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
@WilliamBrand, позвольте мне посмотреть, понимаю ли я. Вы делаете игру и хотите дать своим пользователям возможность устанавливать, какая клавиша должна быть сопоставлена с каким действием.
Короче говоря, нет, вы не можете повлиять на значения, которые браузер возвращает через event.keyCode. Вы можете создать какой-нибудь адаптер или декоратор, чтобы обернуть его, но вы только усложните себе жизнь. Однако вы можете реализовать карту действий, которая будет содержать значение клавиши, которую вы можете назначить такому действию.
Например, сопоставьте букву A с левым действием, D с правым действием и так далее. Если это так, то, возможно, вам следует подумать о реализации карты. Итак, это будет что-то вроде этого:
if (event.keyCode == keyMap[LEFT]){
...
}
Теперь вы должны решить, что keyMap[LEFT] будет храниться как значение. Вы можете написать код, чтобы сказать:
var userInputKey = ...;
...
action = LEFT;
...
keyMap[action] = userInputKey;
Итак, теперь вы можете предоставить своему пользователю способ переназначить клавиши для действия определения.
Дайте мне знать, правильно ли я понял, и может ли эта идея помочь вам создать решение вашей проблемы.
Итак, если я правильно понимаю, вы хотите иметь сопоставление клавиш, которое можно изменить произвольным образом, например, когда игра позволяет вам устанавливать клавиши для перемещения вверх, вниз, влево, вправо и т. д.
Вам понадобится подпрограмма, которая показывает какой-то пользовательский интерфейс, ждет (или получает) нажатие клавиши и сохраняет результат где-то, чтобы использовать его позже в вашем коде.
Я бы использовал event.key, так как это дает вам фактически нажатый ключевой символ. Если вы не хотите использовать это, рассмотрите KeyboardEvent.code для кода, но имейте в виду, что у него есть ограничения (см. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code).
Я сделал быстрый пример того, что вы могли бы сделать - это немного хакерский и, вероятно, не самый элегантный способ сделать что-то (например, скрытое поле для получения нажатия клавиши = O), поэтому используйте его в качестве отправной точки - вам понадобится чтобы разбить его на модули и создать способ передачи новых настроек туда, где они необходимы:
$("#readkeypress").on('keyup', function(e) {
var keyset = e.key.replace(' ', 'Space');
var setting = $("#setting").val();
$("#setkey" + setting + "code").html(keyset);
$("#theModal").modal('hide')
});
$('#theModal').on('show.bs.modal', function(e) {
var theSetting = $(e.relatedTarget).attr("data-setting");
$("#setting").val(theSetting);
$(".modal-title").html("Press the key to set " + theSetting);
})
$('#theModal').on('shown.bs.modal', function() {
$('#readkeypress').focus();
})#customkeymappings {
margin: 20px;
padding: 10px;
color: #fff;
background-color: #414141;
border-radius: 10px;
}
#customkeymappings div {
margin-top: 10px;
margin-bottom: 10px;
}
#customkeymappings label {
display: inline-block;
width: 90px;
}
.keybtn {
cursor: pointer;
font-size: 0.75em;
width: 60px;
height: 35px;
padding: 5px;
border: 0;
color: #fff;
background-color: #666666;
}
.maskedinput {
position: absolute;
width: 0px;
border: 0;
}
.modal-header {
border: 0 !important;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<h4>
Custom Key Mapping:
</h4>
<form id = "customkeymappings">
<div>
<label>Left: </label><button type = "button" class = "keybtn" id = "setkeyleftcode" data-toggle = "modal" data-target = "#theModal" data-setting = "left">not set</button>
</div>
<div>
<label>Right: </label><button type = "button" class = "keybtn" id = "setkeyrightcode" data-toggle = "modal" data-target = "#theModal" data-setting = "right">not set</button>
</div>
</form>
<div class = "modal fade" id = "theModal" tabindex = "-1" role = "dialog" aria-labelledby = "theModalLabel" aria-hidden = "true">
<div class = "modal-dialog modal-sm" role = "document">
<div class = "modal-content">
<div class = "modal-header text-center">
<h5 class = "modal-title">Press the key to set</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<input id = "readkeypress" class = "maskedinput" value = "" />
<input id = "setting" type = "hidden" value = "" />
</div>
</div>
</div>Это, вероятно, сработало бы, если бы я мог получить innerhtml или что-то еще из элемента, который я добавляю на страницу, я забыл упомянуть об этом, но это дополнение к странице, а не реальный сайт... Могу ли я добавить это на сайт где-то и получать значение при регистрации и обновлять его каждые столько-то секунд таким образом if (event.keyCode == document.querySelector('#thing').innerHTML)? Например, сделать цикл для проверки внутреннего html для использования в качестве кода клавиши?
@WilliamBrand - чтобы вы могли использовать локальное хранилище браузера для хранения / извлечения всех сопоставлений клавиш - см. developer.mozilla.org/en-US/docs/Web/API/Window/… - если у меня будет время, я включу это в свой ответ.
Насколько я знаю, вы не можете изменить keyCode. Вот список всех значений, основанных на Unicode keycode.info на основе кода символа Unicode клавиши, которая вызвала событие onkeypress, onkeydown или onkeyup. Вы можете преобразовать значения с помощью HashMap или написать декоратор для переноса event.keyCode, чтобы он использовал keyCode, но возвращал какое-то другое значение, которое может лучше соответствовать вашим потребностям. Дайте мне знать, понял ли я вашу проблему и помогло ли это решить проблему.