Question

我正在使用jQuery和jQuery ValidationEngine在发布之前进行一些表单验证。正在测试的一个字段是隐藏字段，这意味着如果出现错误，验证消息将显示在屏幕外。

我正在使用以下代码将消息锚定在页面的其他位置，但似乎无法将其置于不同浏览器的位置。 FF与Chrome / IE。

 <form id="myForm">
        <input type="text" id="field1" name="field2" class="validate[required]" data-errormessage-value-missing="You must select your from the dropdown list." data-prompt-position="topRight"/>
        <input type="hidden" class="validate[required]" name="eId" id="eId" size="50" data-errormessage-value-missing="You must select from the dropdown list." data-prompt-position="topRight"/>
        <input type="submit"/>
        <div id="errorMe"/>
 </form>

以下是定位错误的javascript：

var er = document.getElementById('errorMe');
var eId = document.getElementById('eId');
var erLeft = er.offsetLeft; /* + 25 */
var erTop  = er.offsetTop; /* - 950 */
console.log('pre = ' + eId.getAttribute('data-prompt-position'));
eId.setAttribute('data-prompt-position','topRight:'+erLeft+','+erTop);
console.log('post = ' + eId.getAttribute('data-prompt-position'));

两组不同的结果，几乎比FF应该下降了950px，在Chrome / IE中下降了~200px。我甚至没有尝试Safari。

当这不起作用时，我也尝试使用左侧/顶部：

function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();

var body = document.body;
var docElem = document.documentElement;

var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;

var top  = box.top +  scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;

return { top: Math.round(top), left: Math.round(left) }

}

但这导致了完全相同的值。

感谢。

弄清楚div的像素位置

0 个答案: