Javascript jquery-css"；变换：缩放“；影响'；。偏移量（）；jquery的特性

我试图在jQuery中进行验证

通过检查给定的

输入

是否为空，它将在

模糊

事件发生后产生错误。基于此，它将在该

输入旁边创建一个
，该输入将具有特定错误。我使用
.offset
获取特定
输入的位置
以定位
.errdiv

CSS:

JS:

那我不知道会发生什么。但事情变得非常糟糕。
.offset（）
似乎工作不正常。你可以看到

错误
div
现在定位为：


有谁能告诉我，即使在缩放页面后，如何正确定位
.errdiv

我做错了什么

欢迎提出任何建议或想法。希望你们能尽快帮助我。提前感谢：）


PS:

transform-origin: 0 0;

没有帮我。而且我不想在
HTML
中使用
或编写
div
，我想动态添加它。

编辑悬赏
我接受的解决方案对于验证部分来说是可以的，但是现在我尝试用ajax实现它，内容将动态添加到div中，并且我必须添加
转换：所有ease2.0s
到
body
的css，以使一些东西看起来很神奇。但是在添加影响
变换的性质的
变换后，该变换会被接受的解决方案改变（变换也会被设置动画）。而且它不能解决定位问题。那么，有没有更好的方法来满足需求呢？任何人都可以提供跨浏览器解决方案吗？
您的问题是jquery没有返回正确的元素大小（
$（this）.width（）
）

尝试使用getBoundingClientRect函数（refer）获取包含元素的矩形对象

您可以通过这种方式在函数中使用它

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

试试这个解决办法


获取匹配项[1]（scaleX）和匹配项[2]（scaleY）中的当前比例

附加之前，将缩放存储到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' + ')');

这是可行的解决方案

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?
        }
    });
});

$（文档）.ready（函数（）{
$（“.inpt”）.blur（函数（）{
//检查输入以进行验证。
$（“.errdiv”）.remove（）；//删除以前的任何错误。
var vl=$（this.val（）；
var vl1=vl.split（“”）.join（“”）；
如果（vl==“”| | vl1==“”）{
//输入为空，将其标记为红色。
$（this.addClass（“err”）；
}
});
$（“.inpt”）.focus（函数（）{
//检查输入是否标记为红色（hasClass）错误？
//$（“.errdiv”）.remove（）；//删除以前的任何错误。
if（$（this.hasClass（“err”））{
//输入已标记！
$（this.removeClass（“err”）；
//var tp=$（this）.offset（）.top+12；//不需要
//var lf=$（此）.offset（）.left+$（此）.width（）+12；//不需要
////添加错误Div和相应的消息。
$（“*此为必填项”）。在（此）之后插入；
$（“.errdiv”）.animate({
“可见性”：“可见”，
“不透明度”：“1”
}，1000）；//显示错误是什么？
}
});
});

只是稍微修改一下而已

从.errdiv类中删除top和left属性，并将div动态附加到元素之后
。但是它没有帮助：（.为什么不呢？矩形总是在同一个位置吗？谢谢你花时间。这是小提琴：&。太好了！谢谢你真的不时地帮助我：）。谢谢你所做的一切+我接受这个答案。很好的解决方案。我有点担心这会引起一点闪烁。也许它只会出现在移动设备上的图形化页面上。你认为这种担心有任何有效性吗？很好的解决方案+1.但这只是一个让人们理解问题的简单例子，在我的真实页面中，DOM树中有几个元素，所以我不能在那里使用这种方法。这就是为什么我需要
.top
和
.left
。谢谢你的时间。我知道这只是一个例子，你的应用程序必须更复杂。但您是否在应用程序中尝试过此解决方案？我在一个有点复杂的场景中测试了这段代码，它对我很有用，所以如果您还没有尝试一下，请将
position:relative
添加到元素中，然后再添加div元素
 $("body").css('transform', 'scale(' + matches[1] + ')');

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

.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;
}

<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>

$(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?
        }
    });
});