我正在尝试使用jQuery进行验证。
在blur事件发生后，通过检查给定的input是否为空，会产生错误。基于此，它将在该input旁边创建一个<div class="errdiv">，其中将具有特定的错误信息。我使用.offset获取该特定input的位置来将.errdiv定位到相应的位置。
CSS：
.inpt {
width:500px;
height:50px;
background:#eee;
color:#444;
border:2px solid #ddd;
padding:5px;
transition: all ease 1s;
border-radius:5px;
outline:none;
}
.inpt:focus {
background:#fff;
color:#222;
border:2px solid #000;
}
.err {
background:pink;
border:2px solid #f00;
color:#a00;
}
.errdiv {
position:absolute;
top:0px;
left:0px;
height:30px;
display:inline-block;
padding:5px;
border-radius:5px;
background:#a00;
border:1px solid #a44;
color:#fff;
text-align:center;
font-weight:bolder;
visibility:visible;
opacity:0;
}
JS：
$(document).ready(function(){
$(".inpt").blur(function(){
// Check Input for validation.
$(".errdiv").remove(); //Remove Any Previous Error.
var vl=$(this).val();
var vl1=vl.split(" ").join("");
if(vl==""||vl1==""){
// Input is Empty Mark It red.
$(this).addClass("err");
}
});
$(".inpt").focus(function(){
//Check Whether Input is marked Red or Not (hasClass) err?
$(".errdiv").remove(); //Remove Any Previous Error.
if($(this).hasClass("err")){
// Input is Marked!
$(this).removeClass("err");
var tp=$(this).offset().top+12;
var lf=$(this).offset().left+$(this).width()+12;
// Add Error Div and appropriate Message.
$("body").append("<div class='errdiv' style='position:absolute;top:"+tp+"px;left:"+lf+"px;'>*This is Required.</div>");
$(".errdiv").animate({
"visibility":"visible",
"opacity":"1"
},1000); //Show What is The Error?
});
});
HTML：
<center>Hello Every One!</center>
<hr>
<center>
<input class="inpt" placeholder="name" type="text" /><br />
<input class="inpt" placeholder="email" type="text" /><br />
<input class="inpt" placeholder="password" type="password" /><br />
</center>
<center>
Just Try Focusing and Bluring the Inputs
</center>
它能正常工作。你可以在这里测试它。
正如你所见，它创建了错误的<div>并将其显示如下：
。
实际问题
当我尝试使用 scale(zoom) 来为视力受损和/或使用非常大屏幕显示器的用户缩放页面时，出现了问题:
body{
/*mozilla hack*/
-moz-transform: scale(1.25,1.25);
/* Chrome and Safari */
-webkit-transform: scale(1.25,1.25);
/*IE */
-ms-transform:scale(1.25,1.25);
/*Opera*/
-o-transform:scale(1.25,1.25);
/*Others*/
transform:scale(1.25,1.25);
}
然后我不知道发生了什么事情。但是情况变得非常糟糕，.offset() 似乎无法正常工作。你可以在这里看到。
div的错误现在被定位为：
请问有人可以告诉我如何在 scaling 页面后正确地定位那个 .errdiv 吗？
我做错了什么吗？
欢迎任何建议或想法。希望大家能尽快帮助我。先谢谢了 :).
PS:
transform-origin: 0 0;
没有帮助我，我不想在HTML中使用<table><td>或写
，而是想要动态添加。修改奖金
我已经接受的解决方案可以用于验证部分，但现在我正在尝试使用ajax实现它，其中内容将动态添加到div中，并且我必须将 transition: all ease 2.0s 添加到的CSS中，以使某些东西看起来很棒。 但是添加trasition会影响到已被解决方案改变的transform的特性（transform也会得到动画效果），而且它并没有解决定位问题。是否有更好的方法来满足需求？能否请任何人提供跨浏览器的解决方案？