jQuery验证插件-未在Webkit浏览器中设置焦点

希望你能帮忙。。我在一个ASP.NET MVC项目中使用地址输入表单

在我开始bug搜索任务之前（尽管我已经浪费了好几个小时，什么也没有得到：（）

我们有一个MVC母版页，该部分包含：

$（“#deliveryAddressForm，#paymentForm”）。验证({
错误：功能（错误映射、错误列表）{
如果（errorList.length>0）{
var form=errorList[0]。element.form；
if（form.id==“deliveryAddressForm”）{
显示错误消息（“”）；
}
else if（form.id==“paymentForm”）{
显示错误消息（“”）；
}
$（.span.error”）.remove（）；//删除服务器端验证错误消息
}
this.default淋浴rors（）；//调用覆盖的淋浴rors
},
onkeyup:function（element）{//on keyup if form now valid remove banner错误消息
if（$（（“label.error”）.length>0）{//if当前显示一些客户端错误
如果（$（“#”+element.form.id）.valid（））{//validate form，则如果不存在任何错误
$（“#errorMessage”）.remove（）；//删除横幅错误消息
}
}
}
});

displayErrorMessage（）函数如下所示：

function displayErrorMessage(msg) {
    $("#errorMessage").remove();
    $("#userMessages").append('<div id="errorMessage">' + msg + '</div>');
}

函数显示错误消息（msg）{
$（“#errorMessage”）.remove（）；
$（“#userMessages”）.append（“”+msg+“”）；
}

其中#userMessages是页面顶部的一个div，用于将错误消息摘要显示为横幅。（例如，“您的送达地址有问题。请更正下面的错误”）

除webkit浏览器（如Safari、Chrome）外，所有浏览器都可以正常工作

在这些浏览器中，验证插件在执行验证后，应将输入焦点设置为页面上的第一个无效字段。在webkit浏览器中，它不会这样做。例如，在Safari中，在正确的字段周围会出现蓝色粗框，但光标不会出现在字段中，并且没有焦点

在尝试提交表单失败（例如电话号码为空）后，客户端错误消息将按预期显示。当您开始键入（例如）电话号码字段时，“onkeyup”代码调用valid（）（重新验证表单，如果表单有效，则返回true）发现它不再无效（空白），并应删除错误消息摘要横幅（#userMessages）

尽管所有浏览器都正确地删除了横幅，但在Safari中，该字段会失去焦点，即使该字段上仍保留着厚厚的蓝色框。因此，后续的按键将丢失，您必须单击“返回”电话号码字段才能继续

我不知所措，希望你能帮忙

提前谢谢

埃德

我已经破解了

我在一个单独的项目中用一个非常基本的框架形式创建了一个测试页面。然后我逐渐地将脚本和标记从原始页面添加到测试页面，每次都在Safari中检查它。直到我添加了对CSS文件的引用，Safari才停止工作

我在CSS中进行了二进制搜索，直到我将其缩小到一行：

input.error { float: left; color: red;  vertical-align: top; text-align: left; }

验证插件将此样式应用于出错的输入字段

正是“float:left”打破了Safari和Chrome

对CSS做了一些小改动以消除这个问题，现在它可以工作了！不过，float:left应该会导致这个问题，这似乎有点奇怪

埃德

我已经破解了

我在一个单独的项目中用一个非常基本的框架形式创建了一个测试页面。然后我逐渐地将脚本和标记从原始页面添加到测试页面，每次都在Safari中检查它。直到我添加了对CSS文件的引用，Safari才停止工作

我在CSS中进行了二进制搜索，直到我将其缩小到一行：

input.error { float: left; color: red;  vertical-align: top; text-align: left; }

验证插件将此样式应用于出错的输入字段

正是“float:left”打破了Safari和Chrome

对CSS做了一些小改动以消除这个问题，现在它可以工作了！不过，float:left应该会导致这个问题，这似乎有点奇怪