Question

如果type =“password”的输入字段被浏览器的自动填充模式填充，则密码可观察值始终未定义。我只输入用户名字段中的第一个字符，然后从下拉列表中选择名称。密码字段由浏览器填充。

<script type="text/javascript">
        $(document).ready(function () {
            var viewModel = function () {
                var self = this;
                self.UserName = ko.observable();
                self.Password = ko.observable();
                self.Submit = function () {
                    var un = self.UserName();
                    var pw = self.Password(); // Password value is undefined!!!!
                    alert(pw);
                };
            };

            ko.applyBindings(new viewModel());
        });
    </script>


<form id="LoginForm" data-bind="submit: Submit">
<fieldset>
    <label for="UserName">Username</label>
    <input id="UserName" data-bind="value: UserName" name="UserName" type="text" />

    <label for="Password">Password</label>
    <input id="Password" data-bind="value: Password" type="password" />
    <button type="submit">Login</button>
</fieldset>
</form>

Answer 1

我相信模型显示的行为是因为Knockout模型在onChange事件期间更新，并且输入在自动填充时不会收到onChange事件。我提出的唯一解决方法是在提交时手动触发onChange事件。

self.Submit = function () {
    var un = self.UserName();
    $("#Password").trigger("change");
    var pw = self.Password(); // Password value is no longer undefined!!!!
    alert(pw);
};

我从this question获得的这个解决方案（测试和工作）依赖于jQuery。如果您不想要jQuery解决方案，链接的问题也会提供一些其他解决方案。

如果输入类型=密码的值由浏览器自动填充模式设置，则Knockout可观察值未定义

1 个答案: