Абсолютная позиция после данных в одной строке - PullRequest
Новая
       7

Абсолютная позиция после данных в одной строке

1 голос
/ 30 декабря 2011

Я пытаюсь добавить пользовательские подсказки после полей ввода, и у меня все работает нормально, за исключением случаев, когда я отправляю форму и отображаются ошибки. По некоторым причинам подсказка блокирует текст ошибки. Это просто странно, и я слишком долго ломал голову, чтобы понять это.

Здесь - это рассматриваемая страница.

У меня есть подсказки только на первых четырех входах. Они работают нормально, пока вы не отправите форму с ошибками. Нажмите «Отправить», чтобы увидеть странное поведение.

В конечном итоге цель состоит в том, чтобы всплывающая подсказка появлялась поверх текста ошибки, а затем исчезала и отображала текст ошибки при переходе назад или переходе в другое поле.

Есть идеи? 

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function prepareInputsForHints() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        // test to see if the hint span exists first
        if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
            // the span exists!  on focus, show the hint
            inputs[i].onfocus = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            // when the cursor moves away from the field, hide the hint
            inputs[i].onblur = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
    // repeat the same tests as above for selects
    var selects = document.getElementsByTagName("select");
    for (var k = 0; k < selects.length; k++) {
        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
            selects[k].onfocus = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            selects[k].onblur = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
}
addLoadEvent(prepareInputsForHints);

Вот CSS для класса error и hint класса: 

.error {
    margin-left:5px;
    font-size:.75em;
    font-weight:bold;
    width:80px;
    color:#FF0000;
}

.hint {
    display:none;
    position:absolute;
    left:650px;
    width:200px;
    margin-top:-4px;
    border:1px solid #c93;
    padding:1.5px 10px 1.5px 10px;
        /* to fix IE6, I can't just declare a background-color,
        I must do a bg image, too!  So I'm duplicating the pointer.gif
        image, and positioning it so that it doesn't show up
        within the box */
    background:#ffc url(pointer.gif) no-repeat -10px 5px;
    font-weight: normal;
}

/* The pointer image is added by using another span */
.hint .hint-pointer {
    position:absolute;
    left:-10px;
    top:-1px;
    width:10px;
    height:19px;
    background: url(/_images/pointer.gif) left top no-repeat;
}
...