我正在尝试用 jQuery 进行验证。
之后会产生错误blur通过检查给定的事件是否发生input是空的。在此基础上，它将创建一个<div class="errdiv">在那旁边input这将会有特定的错误。我用.offset获取该特定位置input定位.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>
而且效果很好。你可以测试一下here http://jsfiddle.net/9hm58/12/.
正如你所看到的，它会产生错误<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 http://jsfiddle.net/9hm58/13/.
The error div now gets positioned as:
谁能告诉我如何定位.errdiv即使在之后也正确scaling这一页?
我做错了什么？
欢迎任何建议或想法。希望大家尽快帮助我。提前致谢 ：）。
transform-origin: 0 0;
没有帮助我。和我不想使用<table><td>或写div以前在HTML我想动态添加它。
我接受的解决方案对于验证部分来说是可以的，但是现在我正在尝试使用ajax来实现它，其中内容将动态添加到div中，并且我必须添加transition:all ease 2.0s to body的 css 使一些东西看起来很棒。但添加后trasition从而影响其性质transform它会被接受的解决方案改变（变换也会变得动画）。并且没有解决定位问题。那么有没有更好的方法来满足需求呢？谁能提供跨浏览器的解决方案吗？
你的问题是 jquery 没有返回元素的正确大小（$(this).width()).
尝试使用 getBoundingClientRect 函数（请参阅this https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect）来获取包围您的元素的矩形对象。
你可以在你的函数中以这种方式使用它
var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12;
尝试这个解决方法
http://jsfiddle.net/H5sW9/10/ 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' + ')');