為什么MVC 5 SPA網站的“登錄”頁面無法使用已保存的密碼？

Question

我有一個MVC 5單頁應用程序，固定的“登錄”頁面無法使用保存的密碼-驗證代碼似乎認為該字段為空，即使不是這樣：

這有效地阻止了用戶登錄。我已經在Windows的Firefox 30.0和一些不同的Android設備上的默認Web瀏覽器中重現了這一點。

來自_Login.cshtml ：

<div class="form-group">
        <label for="LoginUserName" class="col-md-2 control-label">User name</label>
        <div class="col-md-10">
            <input type="text" id="LoginUserName" class="form-control" data-bind="value: userName, hasFocus: true" />
        </div>
    </div>
    <div class="form-group">
        <label for="LoginPassword" class="col-md-2 control-label">Password</label>
        <div class="col-md-10">
            <input type="password" id="LoginPassword" class="form-control" data-bind="value: password" />
        </div>
    </div>

我對Knockout MVC不太熟悉，但似乎可能是相關的。 從login.viewmodel.js ：

function LoginViewModel(app, dataModel) {
// Private state
var self = this,
    validationTriggered = ko.observable(false);

// Private operations
function initialize() {
    dataModel.getExternalLogins(dataModel.returnUrl, true /* generateState */)
        .done(function (data) {
            self.loadingExternalLogin(false);
            if (typeof (data) === "object") {
                for (var i = 0; i < data.length; i++) {
                    self.externalLoginProviders.push(new ExternalLoginProviderViewModel(app, data[i]));
                }
            } else {
                self.errors.push("An unknown error occurred.");
            }
        }).fail(function () {
            self.loadingExternalLogin(false);
            self.errors.push("An unknown error occurred.");
        });
}

// Data
self.userName = ko.observable("").extend({ required: true });
self.password = ko.observable("").extend({ required: true });

Answer 1

根據您要求的人，這似乎是淘汰賽問題還是瀏覽器問題。 顯然，Firefox中的密碼自動填充功能不會觸發更新Knockout數據綁定的DOM事件。

我基於GitHub問題的注釋得出了一個優雅的解決方法-一種腳本，該腳本使用jQuery來迫使單擊提交按鈕時，對所有input元素觸發change事件：

<script>
function autoFillHack() {
    $(":input").trigger("change");
}
</script>

進一步的form ：

<button type="submit" class="btn btn-default" data-bind="click: login, disable: loggingIn" onclick="autoFillHack();">Log in</button>

我在該頁面上只有兩個input元素，但是，正如其他人指出的那樣，根據情況，這可能會產生不良影響。