javascript - 用于在 GitHub 中通过按 Ctrl+Enter(内置热键)提交问题或发布评论时创建确认弹出窗口的用户脚本

标签 javascript forms greasemonkey ctrl modifier-key

测试网址:https://github.com/darkred/test/issues/new

GitHub 允许在公共(public)存储库的问题区域中:

  • 提交只有 1 个字符作为标题且没有正文的新问题,并且
  • 发表仅包含 1 个字符的评论。

上述情况在我身上经常发生,因为“提交问题或评论”的内置热键是 Ctrl + Enter:我在问题/评论文本之前不小心按下了该键盘快捷键准备好了。


因此,我正在尝试制作一个脚本(使用 Greasemonkey),每当我尝试执行以下操作时,该脚本都会显示确认弹出窗口:

  • 提交新问题,或
  • 发表评论

通过按Ctrl + Enter:
如果用户在弹出窗口中按确定,则脚本允许提交,
但如果用户在弹出窗口中按取消,则脚本将停止提交。


我遇到过这两种方法:
在 Brock Adams 的有用评论之后,我得到了以下代码:

var targArea_1 = document.querySelector('#issue_body');         // New issue textarea
var targArea_2 = document.querySelector('#new_comment_field');  // New comment textarea

function manageKeyEvents (zEvent) {
    if (zEvent.ctrlKey && zEvent.keyCode == 13) {   // If Ctrl+Enter is pressed
        if (confirm('Are you sure?') == false) {    // If the user presses Cancel in the popup
            zEvent.stopPropagation();               // then it stops propagation of the event 
            zEvent.preventDefault();                // and cancels/stops the submit submit action bound to Ctrl+Enter
        } 
    }
}

if (targArea_1 !== null) {targArea_1.addEventListener('keydown', manageKeyEvents);}
if (targArea_2 !== null) {targArea_2.addEventListener('keydown', manageKeyEvents);}

现在,每当我按 Ctrl + Enter 时,弹出窗口都会显示正常。
问题是,在弹出窗口中按确定时,问题/评论未提交(即使我没有在弹出窗口中按取消)之前,根本没有)。如何解决这个问题?
并且,在弹出窗口中按一次取消后如何重新允许问题/评论提交?
换句话说:如何在 PreventDefault() 之后重新启用默认值?

最佳答案

基于用户trespassersW的帮助here (我非常感谢他)
即我的代码缺少 else 分支:

if (confirm('Are you sure?') == false) {
    // ...
} else {
    var btn = document.querySelector("#partial-new-comment-form-actions button");
    if (btn) btn.click();
}

这是因为确认消息框会清除键盘事件队列。
(因此点击“确定”操作必须由脚本完成)。

这是一个完整的工作脚本:

// ==UserScript==
// @nameGitHub Confirm Create and Close issues
// @include https://github.com/*
// @grant   none
// ==/UserScript==


(function () {      // Self-Invoking function

    function init() {

        // For submitting issues in issue body textarea via Ctrl+Enter
        var targArea1 = document.querySelector('#issue_body');  // New issue textarea
        function manageKeyEvents1(zEvent) {
            if (zEvent.ctrlKey && zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                } else {
                    var btn1 = document.querySelector('.btn-primary');
                    if (btn1) {btn1.click();}
                }
            }
        }
        if (targArea1 !== null) { targArea1.addEventListener('keydown', manageKeyEvents1); }

        // ------------------------------------------------------------------------------------------------
        // For submitting issues in new comment textarea via Ctrl+Enter
        var targArea2 = document.querySelector('#new_comment_field');   // New comment textarea
        function manageKeyEvents2(zEvent) {
            if (zEvent.ctrlKey && zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                } else {
                    var btn2 = document.querySelector('#partial-new-comment-form-actions button');
                    if (btn2) {btn2.click();}
                }
            }
        }
        if (targArea2 !== null) { targArea2.addEventListener('keydown', manageKeyEvents2); }

    }

    // Page load
    init();

    // On pjax (because GitHub uses the History API)
    document.addEventListener('pjax:end', init);

})();

关于javascript - 用于在 GitHub 中通过按 Ctrl+Enter(内置热键)提交问题或发布评论时创建确认弹出窗口的用户脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38283979/

相关文章:

javascript - 从普通对象创建类实例,无需手动构造函数

javascript - moment.js - 考虑到我的时区是 GMT-3,哪一个是正确的输出?

javascript - handsontable 中的评论定位问题

python - 用 python 保存 MS ACCESS 附件

javascript - Angularjs 绑定(bind)到 Ajax 返回值

c# - 在 ASP.NET 中链接两个表单

javascript - 表单验证 : un-hide submit button when a radio value is selected and text message is entered

javascript - 如何在页面侧面的 float 框中显示我的用户脚本的输出?

javascript - 尝试向 CSS 样式表添加规则在 Firefox 中给出 "The operation is insecure"

javascript - “文档”在 Greasemonkey 中未定义