Вот мой первый вопрос по stackoverflow. Я использовал вас, ребята, чтобы ответить на многие вопросы в прошлом, но на этот раз я не смог найти то, что искал, поэтому любая помощь будет принята с благодарностью!
У меня есть простой веб-сайт, с которым я играл, чтобы освежить в css, javascript, jQuery и html. У меня есть проблема, из-за которой я хочу добавить текстовое поле ввода через JavaScript прямо под самым низким существующим текстовым полем. Это кажется довольно простым и работает правильно в ie9 и firefox, но в chrome каждое новое текстовое поле сдвигается вправо на 2 пикселя.
Вот код HTML и JavaScript:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header> <h3>Header to the 3rd degree!</h3></header>
<section class="textboxes">
<input type="textbox" class="duplicate" />
</section>
</body>
</html>
1010 * Javascript *
$(function(){$('.duplicate').attr('onclick', 'createInputBox()'); });
function createInputBox(){
var inputs = $('.duplicate');
var lastInput = inputs[inputs.length - 1];
var position = getAbsolutePosition(lastInput);
var x = position[0];
var y = position[1] + 25;
$('.textboxes').append(inputTextBoxOpenTag + "style=\"position:absolute; left:" + x + "px; top:" + y + "px;\">" + inputTextBoxCloseTag );
}
function getAbsolutePosition(object){
var curleft = curtop = 0;
if(object.offsetParent){
do{
curleft += object.offsetLeft;
curtop += object.offsetTop;
} while(object = object.offsetParent);
return [curleft, curtop];
}
}
var inputTextBoxOpenTag = "<input type=\"textbox\" class=\"duplicate\" onclick=\"createInputBox()\" "
var inputTextBoxCloseTag="</input>"
Таким образом, основная идея заключается в том, что каждый раз, когда вы щелкаете текстовое поле, под последним текстовым полем добавляется новое.
Новая позиция текстового поля устанавливается с использованием текущей позиции последнего текстового поля. После отладки в chrome я увидел, что горизонтальное положение x было установлено на то значение, которое я хотел. Однако, когда функция была вызвана снова, она утверждала, что фактическое положение было на 2 пикселя больше, чем было установлено в последнем вызове функции.
Хотя эта страница явно не предназначена для чего-то важного, я чувствую, что знание того, что вызывает эту проблему, может дать мне больше информации о том, почему chrome отображает некоторые текстовые поля на другом сайте, над которым я работаю вне очереди, в то время как firefox и ie9 отображают их просто отлично.
Еще раз спасибо за вашу помощь!