Функция jquery show tips не работает в браузерах на основе webkit - PullRequest
Новая
       46

Функция jquery show tips не работает в браузерах на основе webkit

2 голосов
/ 21 января 2012

У меня есть функция jquery, которая показывает / скрывает области, которые выглядят как «подсказки», когда я щелкаю поле ввода в форме.

Функция отлично работает на FirfFox, Chrome, IE (!) :)и т. д. Но совсем не в браузерах на основе webkit, таких как Safari и Android (протестировано) 

$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
    (function(i) {
        // Let the code cleane
        var span = inputs[i].nextElementSibling;

    if(span instanceof HTMLSpanElement) {

if(span.className == "hint") {


        span.onmouseover = function() { this.isOver = true; }
        span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus)  inputs[i].onblur(); }

        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.isFocus = true;
            span.style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.isFocus = false;
            if(!span.isOver) span.style.display = "none";
        }
}        
    }
    })(i);
}
});

Кроме того, для вашего удобства я предоставляю вам http://jsfiddle.net/eZnYY/1/

Ответы [ 3 ]

1 голос
/ 21 января 2012

Попробуйте заменить строку кода: 

if(span instanceof HTMLSpanElement) {

следующим: 

if(span && span.tagName.toUpperCase()==="SPAN") {

http://jsfiddle.net/eZnYY/3/ Проверено на настольном браузере Safary и Android (эмуляторе)

1 голос
/ 21 января 2012

Вы должны использовать методы jQuery для обеспечения кросс-браузерной совместимости (ваш вопрос имеет тег jQuery).

Это чистый JavaScript.Преобразуйте ваш код в jQuery, используйте события jQuery и установите css.

Например:

ваш код 

var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){ .. }

jQuery 

$("input").each(function() { ... });
0 голосов
/ 21 января 2012

Что я не понимаю, так это то, что если вы используете jquery, почему вы не используете его в своей функции?Уверяю вас, если вы будете использовать jquery для прикрепления событий, они будут работать в webkit и во всех других браузерах.

...