gpt4 book ai didi

html - 使用 knockoutjs 时 Chrome 中的最大长度约束验证异常

转载 作者:行者123 更新时间:2023-11-28 01:14:12 25 4
gpt4 key购买 nike

这里是 jsfiddle

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<p>First name: <input data-bind="value: firstName" maxlength="3" /></p>
<style>
input:invalid
{
border-color: #e67b7b;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
var viewModel =
{ firstName: ko.observable("Ikram")
};

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

在 Chrome 中,当旧值超过 maxlength 时,约束验证在我们编辑输入之前不会生效。当我们开始编辑时,它会变红。

在 IE 中,它按预期工作,当我们用旧值加载页面时,它会在开始时变红(验证)。

最佳答案

这看起来不像是 knockout 。

<input value='my longname' maxlength="3" />

也不会在 chome 中显示错误。

这是一个 knockout 解决方法。

首先创建一个 hasError computed obseable。

 function hasErrorComputed(){   
return viewModel.firstName().length > 3;
}
iewModel.hasError = ko.computed(hasErrorComputed);

然后将css绑定(bind)到hasError。

<input data-bind="css: {error: hasError}, value: firstName" maxlength="3" />

这是 jsfiddle

使用自定义绑定(bind)可以实现更 Eloquent 解决方案:http://knockoutjs.com/documentation/custom-bindings.html

或扩展器 http://knockoutjs.com/documentation/extenders.html

请联系我们了解更多详情。

关于html - 使用 knockoutjs 时 Chrome 中的最大长度约束验证异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51947173/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com