jquery-css“transform：scale”影响jQuery的'.offset（）' [英] jquery - css "transform:scale" affects '.offset()' of jquery
问题描述
我尝试在jQuery中进行验证。
在 blur 事件发生后会产生错误通过检查给定的输入是否为空。基于此，它将在输入旁边创建一个< div class =errdiv> 会有具体的错误。我使用 .offset 获得该特定输入的位置 .errdiv 。
CSS：
.inpt {
width：500px;
height：50px;
背景：#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）。
$（。errdiv）。remove（）; //删除任何以前的错误。
var vl = $（this）.val（）;
var vl1 = vl.split ）.join（）;
if（vl ==|| vl1 ==）{
//输入为空标记为红色
$ ）.addClass（err）;
}
}）;
$（。inpt）。focus（function（）{
//检查输入是否被标记（$（this）.hasClass（err））{$（$）$ {this}
//输入is Marked！
$（this）.removeClass（err）;
var tp = $（this）.offset（）。top + 12;
var lf = $（this）.offset（）。left + $（this）.width（）+ 12;
//添加错误Div和适当的消息
$ < div class ='errdiv'style ='position：absolute; top：+ tp +px; left：+ lf +px;'> * This is Required。
$（。errdiv）。animate（{
visibility：visible，
opacity：1
}，1000） //显示什么是错误？
}）;
}）;
HTML：
< center> Hello Every One！< / center>
< hr>
< center>
< input class =inptplaceholder =nametype =text/>< br />
< input class =inptplaceholder =emailtype =text/>< br />
< input class =inptplaceholder =passwordtype =password/>< br />
< / center>
< center>
只是尝试聚焦和模糊输入
< / center>
它工作正常。您可以查看。
错误 div 现在定位为：
任何人都可以告诉我 如何定位<$ c $即使在缩放页面之后，仍可正确地执行
我做错了什么？
欢迎任何建议或想法。希望大家会很快帮助我。提前感谢：）。
PS：
transform-origin：0 0;
没有帮助我。和我不想使用< table>< td> 或写入 div HTML 我想动态添加。
编辑Bounty
我接受的解决方案对于验证部分是好的，但现在我试图用ajax实现它，其中的内容将被动态添加到div，我必须添加 transition：all ease 2.0s 到 body 的css让一些东西看起来惊人。但是在添加 trasition 之后，会影响 transform 的属性，该属性由接受的解决方案改变（transform也会变为动画）。并没有解决定位的问题。所以有什么更好的方法来满足需要？
你的问题是jquery没有返回正确的大小你的元素（
code> $（this）.width（））
尝试使用getBoundingClientRect函数（请参阅这个），以取得包含您的元素的矩形物件。
你可以用这种方式在你的函数中使用它。
var lf = $（this）.offset left + $（this）[0] .getBoundingClientRect（）。width + 12;
请尝试此解决方法
获取当前比例in array [1]（scaleX）and matches [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'+'）'）;添加div恢复到125％后，
$（body）css（'transform'，'scale（'+ matches [1] +'）'）;
我只使用transform而不使用-webkit- transition，-moz-transform ....您应该使用
<$>。
< c $ c> $（body）css（'transform'，'scale（'+'1'+'，'+'1'+'）'）;
I'm Trying To do Validation in jQuery.
It'll produce error after blur event occurs by checking whether the given input is empty. Based on that, it'll create a <div class="errdiv"> next to that input which will have the specific error. I use .offset to get the position of that specific input to position .errdiv there.
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>
And it works fine. You can test it here.
As you can see it creates error <div> and displays it as follows:
.
Actual Problem
The Problem occurs when I try to scale(zoom) my page for visually impaired peoples and/or for really big screen displays, using:
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);
}
Then I don't know what happens. But things go terribly wrong. the .offset() doesn't seems to work properly. You can see it Here.
The error div now gets positioned as:
Can anyone please tell me how to position that .errdiv correctly even after scaling the page?
What I'm doing wrong?
Any suggestions or ideas are welcome. Hope you all will help me soon. Thanks in advance :).
PS:
transform-origin: 0 0;
didn't helped me. and I don't want to use <table><td> or write div previously in HTML I want to add it dynamically.
Edit For Bounty
The solution I've accepted Is okay for The validation part, But Now I'm trying to implement it with ajax, where the content will be dynamically added to the div, and I've to add transition:all ease 2.0s to body's css to make some stuff look amazing. But after adding trasition that affects the nature of transform which is altered by the solution accepted (transform also gets animated). and it doesn't solve the problem of positioning. So Is there any better way to satisfy the need? Can Anyone please provide a cross browser solution?
your problem is that jquery is not returning the correct size of your element ($(this).width()).
try using getBoundingClientRect function (refer this) to get a rectangle object that encloses your element.
you can use it in your function in this way
var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12;
try this workaround
get current scale in matches[ 1] (scaleX) and matches[ 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);
before append store the zoom to 100%
$("body").css('transform', 'scale(' + '1' + ')');
after you've added the div restore to 125%
$("body").css('transform', 'scale(' + matches[1] + ')');
I have used only transform and not -webkit-transition,-moz-transform.... that you should use.
to scale for different factors x and y you should use
$("body").css('transform', 'scale(' + '1' +',' +'1' + ')');
这篇关于jquery-css“transform：scale”影响jQuery的'.offset（）'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
