Question

如果你想自动填写密码怎么办？我在这里使用类似的东西...我正在使用Div（id = loginButton）并且它有一些图像 - 我不想在MVC应用程序（）中使用按钮控制，也不需要图像按钮。我有隐藏的输入控件，实际上是隐藏按钮（id = submit_btn）。

所以，在div（id = loginButton）上点击，我想调用隐藏的输入控件（id = submit_btn）并提交动作。

HTML：

<div id="loginButton" > </div>

<input type="submit" style="display:none" name="submit" id="submit_btn" />

和JQuery：

$(document).ready(function() {
 $('#loginButton').click(function() {
  $('#LoginForm').submit();
 });
 $("form[action$='HandleLoginForm']").submit(function() {
  Login();
   return false;
 });
 return false;
});

函数Login（）正在使用Ajax，无需下载文件对话框，但我还需要自动完成密码对话框。

 function Login() {
  var urlData = $("#LoginForm").serialize();

    if (returnUrl != "") {
      urlData = $("#LoginForm").serialize() + "&returnUrl=" + returnUrl;
    }
  $.ajax({
  url: $("#LoginForm").attr("action"),
    type: "POST",
    data: urlData,
    dataType: "json",
    success: function(result) {
      if (result.Content != null) {
        if (result.Valid) {
          window.location = result.Content.toString();
        }
        else {
          document.body.innerHTML = result.Content.toString();
        }
      }
    }
  });
  return false;
}

仅使用

时很容易

<input type="submit">

而不是DIV。表单知道它是自动完成密码，但如果我使用div并强制隐藏按钮点击如下面的代码，它不会显示自动完成密码对话框。

 $('#submit_btn').click();

它无效。用户已登录，但没有提醒浏览器存储密码。

我需要这个。

Answer 1

我终于找到了解决方案。 如果我们要使用AUTOCOMPLETE密码提交表单，我们可以使用图片而不是按钮：

<input type="image" id="loginImg" src="../Images/loginImage.png"  
    class="loginButton" />

浏览器会要求您保存密码，我们将使用图片而不是按钮，如果我们想要，则会出现无下载文件对话框像我一样在控制器中调用操作。

所以，这将是最终的HTML代码，万一有人需要它：

在提交表单上（默认为'HandleLoginForm'操作）调用javascript登录方法：

$(document).ready(function() {
  $("form[action$='HandleLoginForm']").submit(function() {
    Login();
    return false;
  });
  return false;
});

使用MVC控制器操作的登录用户的登录方法：

function Login() {
  var urlData = $("#LoginForm").serialize();

  if (returnUrl != "") {
    urlData = $("#LoginForm").serialize() + "&returnUrl=" + returnUrl;
  }
  $.ajax({
    url: $("#LoginForm").attr("action"),
    type: "POST",
    data: urlData,
    dataType: "json",
    success: function(result) {
      if (result.Content != null) {
        if (result.Valid) {
          window.location = result.Content.toString();
        }
        else {
          document.body.innerHTML = result.Content.toString();
        }
      }
    }
  });
  return false;
}

如果我们想使用输入按钮登录，只需触发图像。

function submitenter(myfield, e) {

var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  else return true;

  if (keycode == 13) {
    $("#loginImg").trigger();
    return false;
  }
  else
    return true;
}

以下是HTML代码：

     <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
            <% Html.EnableClientValidation(); %><!-- MVC2 validation requires this -->
              <% using (Html.BeginForm("HandleLoginForm", "Login", FormMethod.Post,
                     new { id = "LoginForm" })) %>
              <% {
              %>

         <div class="divDisplayNone errorDiv"> <!-- div for errors  using MicrosoftMvcJQueryValidation.js-->
              <%=Extensions.DisplayLoginError("DivErrorsHeader", "DivErrorsContent", Model) %>
            </div>

        <div class="leftDiv">
                <label for="UserName">
                  <%=Resources.TextUsername%></label>
              </div>
              <div class="rightDiv">
                <%= Html.TextBoxFor(m => m.UserName, new { id = "txtUsername", @class = "inputField", tabIndex=1, AUTOCOMPLETE = "on", 
          onKeyPress = "return submitenter(this,event)" })%>
                <%= Html.ValidationMessageFor(m => m.UserName, "", new { @class = "redStar" })%>
              </div>

        <div class="leftDiv">
                <label for="password">
                  <%=Resources.TextPassword%></label>
              </div>
              <div class="rightDiv">
                <%= Html.PasswordFor(m => m.Password, new
        {
          id = "txtPassword", @class = "inputField", AUTOCOMPLETE = "on", tabIndex = 2,
          onKeyPress = "return submitenter(this,event)" })%>
                <%= Html.ValidationMessageFor(m => m.Password, "", new { @class = "redStar" })%>
              </div>
        <input type="image" id="loginImg" src="<%=Constants.ImageButtonNext %>"  
                class="loginButton" />


    <div class="rightDiv">
            <%= Html.CheckBoxFor(c => c.RememberMe, new { id = "chbRememberMe", tabIndex = 3,  onKeyPress = "return submitenter(this,event,'"+System.Web.HttpContext.Current.Request.Params["ReturnUrl"]+"')"  })%>
            <label class="inline" for="rememberMe">
              <%=Resources.TextRememberPassword %></label>
          </div>
<% } %>
</asp:Content>

Answer 2

对SubmitEnter方法进行更正 - 您必须在触发控制时定义TYPE。

$("#loginImg").trigger("submit");

这是整个JavaScript方法：

function submitenter(myfield, e) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  else return true;

  if (keycode == 13) {
    $("#loginImg").trigger("submit");
    return false;
  }
  else
    return true;
}

Div单击和AUTOCOMPLETE密码对话框问题

2 个答案: