禁用提交表单jquery的提交输入

I am implementing a password manager like chrome extension, which detect the password field and try to intercept the submit function. What I would like is:

我正在实现像chrome扩展的密码管理器,它检测密码字段并尝试拦截提交功能。我想要的是:

User click "login" in a website (say Facebook). The extension content script detect the value of password and username

用户点击网站(比如Facebook)中的“登录”。扩展内容脚本检测密码和用户名的值

Ask if the user would like to store the login credentials in the manager

询问用户是否要将登录凭据存储在管理器中

If yes, store the credentials.

如果是,请存储凭据。

The problem is in step 2, I was trying to prevent it from submitting until the dialog returns user action, just like any other browser built-in password manager. But apparently the preventDefault() does not work because the webpage keeps refreshing just like calling curSubmit[0].click(), which would make the dialog keep reappearing.

问题出在第2步,我试图阻止它提交,直到对话框返回用户操作,就像任何其他浏览器内置密码管理器一样。但显然,preventDefault()不起作用,因为网页保持刷新就像调用curSubmit [0] .click()一样,这会使对话框不断重现。

Is there any idea what is wrong? Part of my code is:

有什么问题有什么问题吗?我的部分代码是:

var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
  if (inputs[i].type.toLowerCase() === "password") {
    var curSubmit = $("input[type=submit]",inputs[i].closest('form'));
    curSubmit[0].click(function(event){
      event.preventDefault();
    });

    curSubmit[0].onclick = function(){
       $('body').append('<div id="store-dialog" title="Store password?"><p>Do you want to store the login credentials?</p></div>');
       var buttons = $( ".store-dialog" ).dialog( "option", "buttons" );
       $( "#store-dialog" ).dialog({
          resizable: false,
          height: "auto",
          position: { my: "center", at: "center", of: window },
          modal: true,
          buttons: {
            "Yes": function() {
              $( this ).dialog( "close" );
            },
            "Not this time": function() {
              $( this ).dialog( "close" );
            },
            "Never": function() {
              $( this ).dialog( "close" );
            }
          }
      });
    }
  }
  break;
}

1 个解决方案

#1

The syntax you're using for the click handler is invalid because curSubmit[0] is not a jQuery object but a standard DOM element.

您用于单击处理程序的语法无效,因为curSubmit [0]不是jQuery对象而是标准DOM元素。

These are correct:

这些是正确的:

curSubmit[0].onclick = function(e) { ...... };

curSubmit [0] .onclick = function(e){......};

curSubmit[0].addEventListener("click", function(e) { ...... });

curSubmit [0] .addEventListener(“click”,function(e){......});

As for stopping try the entire artillery for both click and submit events:

至于停止尝试整个炮兵点击和提交事件:

event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();

#1