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

Question

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

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

• отправить новый номер или
• опубликовать новый комментарий.

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

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

---

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

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

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

Проблема, с которой я все еще сталкиваюсь, заключается в том, что, если я перейду к новой странице проблемы, следуя 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
})();

STR:

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

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

---

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

Answer 1

Мне удалось решить эту проблему , заставив расфокусироваться + переориентироваться на #issue_title элемент:
при открытии страницы "Новая проблема" основное внимание уделяется текстовому полю заголовка проблемы.
Сценарий по какой-то причине не заблокирует отправку. Но, если вы заставите расфокусировать и перефокусировать этот элемент (используя blur() (= не сфокусировано) и 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 - подтверждения перед отправкой вопросов и комментариев