Пользовательский скрипт для создания всплывающего окна подтверждения при нажатии Ctrl+Enter или Enter в текстовом поле заголовка новой страницы задачи в GitHub

(В продолжение этого ответа)

Я пытался создать скрипт (используя Greasemonkey), который показывал бы всплывающее окно подтверждения всякий раз, когда я пытаюсь:

  • представить новый вопрос, или
  • разместить новый комментарий.

нажатием Ctrl + Enter:
если пользователь нажимает Ok во всплывающем окне, скрипт разрешает отправку,
но если пользователь нажимает Cancel во всплывающем окне, скрипт останавливается представить.

Сценарий в ответе выше работает нормально в этих случаях.

Я заметил, что есть еще один способ отправить сообщение о проблеме:
нажмите Enter или Ctrl+Enter, удерживая фокус на текстовом поле названия проблемы< /сильный> .

Я также хотел бы покрыть это сценарием.

Ниже приведен мой код.
Если я просто открою страницу новой задачи (https://github.com/darkred/test/issues/new) в новой вкладке _(т.е. не через рабочий процесс одностраничного приложения, он же History API)_), то скрипт работает и при нажатии Ctrl+Ввод.

Проблема, с которой я все еще сталкиваюсь, заключается в том, что если я перехожу на страницу новой задачи, следуя New issueкнопке (т.е. через History API),
а затем либо нажимаю Ctrl +Enter или просто Enter в текстовом поле заголовка, затем на мгновение появляется всплывающее окно, но отправка не блокируется.

(function () {
    function init() {
        var targArea = document.querySelector('#issue_title'); // New issue title
        function manageKeyEvents(zEvent) {
            if (zEvent.ctrlKey && zEvent.keyCode === 13) {      // and the focused element is the issue title textbox
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                // } else {
                    // var btn = document.querySelector('.btn-primary');                        // 'Submit new issue' button                
                    // btn.click();
                }
            }
        }
        if (targArea !== null) {targArea.addEventListener('keydown', manageKeyEvents);}
    }
    init();
    document.addEventListener('pjax:end', init); // for the History API
})();

СИЛ:

  • откройте https://github.com/darkred/test/issues,
  • нажмите кнопку New Issue (через History API вы будете перенаправлены на https://github.com/darkred/test/issues/new,
  • (Теперь вы заметите, что фокус находится на текстовом поле названия проблемы)
    введите 123 в качестве названия проблемы и сохраните фокус на текстовом поле названия проблемы (оставьте тело проблемы пустым) ,
  • нажмите Ctrl+Enter (или просто Enter),
  • обратите внимание, что на мгновение появится всплывающее окно с подтверждением,
    но отправка не будет заблокирована.

Что не так с моим сценарием?

Для справки, вот список сочетаний клавиш GitHub: скриншот,
который появляется когда вы нажимаете ? на новой странице выпуска.


javascript forms greasemonkey ctrl modifier-key
person darkred    schedule 09.08.2016    source источник
comment
Попробуйте предотвратить до confirm и, если все в порядке, вызовите форму submit() напрямую или используйте dispatchEvent.   -  person wOxxOm    schedule 09.08.2016
comment
@wOxxOm: Спасибо за попытку помочь. Итак, я попытался предотвратить до confirm, но, к сожалению, если я изменю manageKeyEvents(zEvent) на наличие сейчас if (zEvent.ctrlKey && zEvent.keyCode === 13) {zEvent.stopPropagation(); zEvent.preventDefault();, а затем if (confirm === ..), это не остановит отправку.   -  person darkred    schedule 10.08.2016
comment
Да, предотвращение работает для текущего события, поэтому вам нужно добавить прослушиватель отправки.   -  person wOxxOm    schedule 11.08.2016
comment
Я предполагаю, что ваш сценарий не первый в цепочке событий. Попробуйте использовать // @run-at document-start и прикрепите прослушиватель отправки к document, а внутри него проверьте, принадлежит ли текущий объект event.target форме, и в этом случае предотвратите событие.   -  person wOxxOm    schedule 11.08.2016
comment
@wOxxOm: blur() и focus() (в моем ответе ниже) полностью решают проблему. Я удалил свои предыдущие 3 комментария как неактуальные.   -  person darkred    schedule 26.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось решить эту проблему, принудительно расфокусировав + перефокусировав элемент #issue_title:
когда вы открываете страницу "Новая проблема", фокус находится на текстовом поле заголовка задачи.
Сценарий по какой-то причине не заблокировал бы отправку. Но если вы принудительно расфокусируете и перефокусируете этот элемент (используя blur()(=unfocus) и focus()), скрипт заблокирует отправку.

Вот код (всегда // @run-at document-end)

(function () {
    function init() {
        var targArea = document.querySelector('#issue_title'); // New issue title
        function manageKeyEvents(zEvent) {
            targArea.blur();
            targArea.focus();
            if ((zEvent.ctrlKey && zEvent.keyCode === 13) || zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                } else {
                    var btn = document.querySelector('.btn-primary');  
                    btn.click();
                }
            }
        }
        if (targArea !== null) {targArea.addEventListener('keydown', manageKeyEvents);}
    }
    init();
    document.addEventListener('pjax:end', init); // for the History API
})();


А вот и полный пользовательский скрипт:
GitHub — Подтверждения перед отправкой вопросов и комментариев

person darkred    schedule 13.08.2016