我正在尝试在jQuery中进行验证。
通过检查给定的blur
是否为空,它会在input
事件发生后产生错误。在此基础上,它会在<div class="errdiv">
旁边创建一个具有特定错误的input
。我使用.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>
它工作正常。您可以对其进行测试here。
正如您所看到的,它会创建错误<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()
似乎无法正常工作。你可以看到它Here。
错误div
现在定位为:
任何人都可以告诉我 即使在.errdiv
页面 之后如何正确定位scaling
?
我做错了什么?
欢迎任何建议或想法。希望大家能尽快帮助我。在此先感谢:)。
<小时/> 的 PS:
transform-origin: 0 0;
没有帮助我。和我不想在<table><td>
之前使用div
或写HTML
我想动态添加它。
我接受的解决方案可以用于验证部分,但是现在我正在尝试使用ajax实现它,其中内容将动态添加到div中,我要添加transition:all ease 2.0s
到body
的css让一些东西看起来很神奇。但是在添加trasition
之后会影响transform
的性质,而{{1}}的性质会被接受的解决方案所改变(变换也会变得生动)。它并没有解决定位问题。那么有没有更好的方法来满足需求?任何人都可以提供跨浏览器解决方案吗?
答案 0 :(得分:12)
你的问题是jquery没有返回元素的正确大小($(this).width()
)。
尝试使用getBoundingClientRect函数(参考this)获取一个包围元素的矩形对象。
你可以用这种方式在你的功能中使用它
var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12;
尝试此解决方法
获得匹配[1](scaleX)中的当前比例并匹配[2](scaleY)
var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/;
var matches =$("body").css('transform').match(matrixRegex);
在追加之前将缩放存储为100%
$("body").css('transform', 'scale(' + '1' + ')');
$("body").css('transform', 'scale(' + matches[1] + ')');
我只使用了transform而不是-webkit-transition,-moz-transform ....你应该使用它。
要根据不同因素x和y进行缩放,您应该使用
$("body").css('transform', 'scale(' + '1' +',' +'1' + ')');
答案 1 :(得分:1)
这是工作解决方案
<强> CSS 强>
.inpt:focus {
background:#fff;
color:#222;
border:2px solid #000;
}
.err {
background:pink;
border:2px solid #f00;
color:#a00;
}
.errdiv {
position:absolute;
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;
}
<强> 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>
<强> JAVASCRIPT 强>
$(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;// not needed
// var lf=$(this).offset().left+$(this).width()+12;// not needed
// // Add Error Div and appropriate Message.
$('<div class="errdiv">*This is Required.</div>').insertAfter(this);
$(".errdiv").animate({
"visibility": "visible",
"opacity": "1"
}, 1000); //Show What is The Error?
}
});
});
一点点修改都是
从.errdiv类中删除top和left属性,并在元素
之后动态追加div