用于在GitHub中新发行页面的标题文本框中按Ctrl + Enter或Enter时创建确认弹出窗口的用户脚本

Question

(In continuance of this answer )

I've been trying to make a script (using Greasemonkey) that would show a confirmation popup whenever I attempt to:

• submit a new issue, or
• post a new comment.

via pressing Ctrl + Enter :
if user presses Ok in the popup, then the script to allow the submit,
but if the user presses Cancel in the popup, then the script to stop the submit.

The script in the answer above works ok in these cases.

---

I've noticed that, there's an additional way to submit an issue:
press Enter or Ctrl+Enter while having focus on the issue title textbox .

I'd like to cover this with the script, too.

Below is my code.
if I just open the new issue page ( https://github.com/darkred/test/issues/new ) in a new tab _(ie not via single-page application workflow, aka the History API)_), then the script also works when pressing Ctrl+Enter .

The problem that I still have are that if I navigate to the new issue page via following the New issue button (ie via the History API) ,
and then I either press Ctrl+Enter or just Enter in the title textbox, then the popup appears momentarily but the submit is not blocked .

(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:

• open https://github.com/darkred/test/issues ,
• click the New Issue button (you'll get redirected via the History API to https://github.com/darkred/test/issues/new ,
• (You'll notice the focus now is on the issue title textbox)
  type 123 as issue title and keep the focus on the issue title textbox (leave the issue body empty) ,
• press Ctrl+Enter (or just Enter),
• notice now that the confirmation popup will appear momentarily,
  but the submit won't be blocked.

What's wrong with my script?

---

For reference here is a list of the GitHub's keyboard shortcuts list: screenshot ,
that appears when you press ? in the new issue page.

Answer 1

I managed to solve this by forcing an unfocus+re-focus on the #issue_title element :
when you open the New issue page, the focus is on the issue title textbox.
The script for some reason wouldn't block the submit. But, if you force an unfocus and re-focus of that element (using blur() (=unfocus) and focus() ) , then the script blocks the submit.

Here is the code (always // @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
})();

And here is the complete userscript:
GitHub - Confirmations before submitting issues and comments