javascript - jquery - css "transform:scale"影响 jquery 的 '.offset()'

Question

我正在尝试在 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 之后也是正确的页面？

我做错了什么？

欢迎提出任何建议或想法。希望大家尽快帮助我。提前致谢:)。

---

附言:

transform-origin: 0 0;

没有帮助我。并且 我不想使用 <table><td>或写 div以前在 HTML我想动态添加。

赏金编辑

我接受的解决方案对于验证部分没问题，但现在我正在尝试使用 ajax 实现它，其中内容将动态添加到 div，我必须添加 transition:all ease 2.0s至 body的 CSS 使一些东西看起来很棒。但是在添加 trasition 之后影响 transform 的性质它被接受的解决方案改变了(转换也得到了动画)。它并没有解决定位问题。那么有没有更好的方法来满足需求呢？谁能提供跨浏览器的解决方案？

Answer 1

您的问题是 jquery 没有返回正确的元素大小 ($(this).width())。

尝试使用 getBoundingClientRect 函数(引用 this )来获取包含您的元素的矩形对象。

你可以这样在你的函数中使用它

var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12;

试试这个解决方法

http://jsfiddle.net/H5sW9/10/

在 matches[1] (scaleX) 和 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....。

要针对不同的因素 x 和 y 进行缩放，您应该使用

$("body").css('transform', 'scale(' + '1' +','  +'1' + ')');