Как обратиться к кнопке отправки формы через JavaScript

Оффтоп javascript
1

Управление стилями кнопки submit через JavaScript

Использую JavaScript и jQuery для изменения размеров картинок:

var picWidth = 0.9 * $(window).innerWidth();
var picHeight = 0.6 * $(window).innerWidth();

$(document).ready(function(){
    $(".image-container").css("width", picWidth);
    $(".image-container").css("height", picHeight);
});

Также использую CSS для стилизации кнопки отправки формы:

form input[type=submit]{
    background: url("button-bg.png") no-repeat center center;
    width: 120px;
    height: 45px;
    border: none;
    color: transparent;
    font-size: 0;
}

Вопрос такой: как правильно обратиться к элементу input[type=submit] в JavaScript, чтобы динамически менять фоновое изображение кнопки? В примерах выше я работал только с CSS классами, а тут нужно выбрать элемент по типу.

2

Раз jquery уже подключен, используй его. Попробуй: $("input[type=submit]").css("background", "url('твоя-картинка.png') no-repeat center center");. Я всегда меняю весь background, а не только background-image - работает стабильнее. Можешь добавить hover эффект: $("input[type=submit]").hover(function(){...});. Главное - подгони картинку под 120x45 пикселей, а то будет кривовато.

3

Я бы еще добавил проверку, чтобы убедиться, что элемент существует, перед изменением стилей. Например, if($('input[type=submit]').length > 0) - иногда скрипт запускается до загрузки DOM и выдает ошибки. Кстати, у тебя есть конкретная задача с динамическими изменениями фона или ты просто изучаешь возможности?

4

The Problem:

Вы пытаетесь получить код нажатой клавиши в JavaScript, но получаете непредсказуемые и повторяющиеся числовые значения вместо ожидаемых кодов буквенных клавиш. Ваш текущий код использует устаревший метод e.keyCode, который приводит к некорректной работе в современных браузерах.

:thinking: Understanding the “Why” (The Root Cause):

Проблема заключается в использовании устаревшего свойства e.keyCode объекта события keydown. Это свойство было заменено на более надежные и точные e.code и e.key. e.keyCode часто ведет себя непредсказуемо и неконсистентно в разных браузерах и на разных клавиатурах, особенно при работе с функциональными и модифицирующими клавишами (например, Shift, Ctrl, Alt). Числа, которые вы получаете (48-57), соответствуют кодам цифр на клавиатуре, что указывает на вероятный конфликт или некорректную обработку события.

:gear: Step-by-Step Guide:

  1. Замените e.keyCode на e.code или e.key: Это ключевое изменение для решения проблемы. e.code возвращает строку, описывающую код клавиши (например, “KeyQ” для клавиши Q), а e.key возвращает саму нажатую клавишу как строку (например, “q” или “Q”). Выберите наиболее подходящий вариант в зависимости от ваших нужд.

    document.addEventListener('keydown', function(e) {
    console.log(e.code); // Или e.key
}, false);

  2. Проверьте раскладку клавиатуры: Убедитесь, что у вас выбрана правильная раскладка клавиатуры. Неправильная раскладка может приводить к неожиданным результатам.

  3. Убедитесь, что фокус на вашем окне: Проверьте, чтобы окно браузера, где работает ваш скрипт, имело фокус. Если фокус на другом окне или приложении, события клавиатуры могут не регистрироваться корректно.

  4. Отключите NumLock (при необходимости): Если вы используете цифровую клавиатуру и NumLock включен, некоторые клавиши могут выдавать числовые коды вместо буквенных.

:mag: Common Pitfalls & What to Check Next:

  • Несовместимость с очень старыми браузерами: Если вам необходимо поддерживать очень старые браузеры, которые не поддерживают e.code и e.key, вам потребуется использовать полифил или альтернативный подход, например, проверку кода клавиши с учетом возможных различий между браузерами. Однако, это не рекомендуется, так как поддержание поддержки устаревших браузеров неэффективно.

  • Конфликты с другими скриптами: Другие скрипты на странице могут перехватывать события клавиатуры. Проверьте, нет ли конфликтов с другими обработчиками событий keydown.

  • Внешние устройства: Проверьте наличие подключенных внешних клавиатур или других устройств ввода, которые могут вмешиваться в работу.

:speech_balloon: Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!