Javascript placeholder для IE8 не работает

Я пытаюсь предоставить обходное решение для IE7, IE8 и IE9. Из кодов в Интернете, я нашел JavaScript, и я стараюсь, чтобы проверить его с помощью простой страницы, как это:Javascript placeholder для IE8 не работает

<html> 
<HEAD> 
<script type="text/javascript"> 
$('[placeholder]').focus(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
    input.val(''); 
    input.removeClass('placeholder'); 
    } 
}).blur(function() { 
    var input = $(this); 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
    input.addClass('placeholder'); 
    input.val(input.attr('placeholder')); 
    } 
}).blur().parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 
    }) 
}); 
</script> 
</head> 
<body> 
<form> 
<input class="placeholder" type="text" name="nama" placeholder="try"> 
</form> 
</body> 
</html>

, который я надеялся, покажет вход с шаблонным текстом «примерить» внутри на IE 8, но это ничего не показывает. Я пробовал все, что мог попробовать за пределами javascript-кода, например, стирать атрибут класса, добавлять полный атрибут в тег формы и т. Д. но заполнитель все еще кажется не показан. вы можете помочь мне, что не так с этим кодом? Я все еще новичок в javascript и веб-программировании, поэтому, возможно, ошибка не сразу ясна для меня.

Я получил код от https://gist.github.com/hagenburger/379601

источник

2013-12-02 Chen Li Yong

Благодарим вас за всех людей, которые отметили этот вопрос как дубликат, но оказалось, что я не нуждаюсь в том, что «этот вопрос уже имеет ответ здесь:« часть или где-то еще ». Мне всего лишь два человека, которые действительно помогают, и решение, в котором я нуждаюсь и работающее для меня, на самом деле так же просто, как кто-то (HaukurHaf) указал мне: «ваш скрипт работает слишком рано!» Я думаю, что это проще, чем помечать мой вопрос как дубликат, где я не могу найти «дублированный» вопрос, который имеет ответ, который мне нужен. –

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

<script type="text/javascript"> 
$(function() { 
$('[placeholder]').focus(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
    input.val(''); 
    input.removeClass('placeholder'); 
    } 
}).blur(function() { 
    var input = $(this); 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
    input.addClass('placeholder'); 
    input.val(input.attr('placeholder')); 
    } 
}).blur().parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 
    }) 
}); 
}); 
</script>

источник

2013-12-02 08:39:39 HaukurHaf

спасибо за быстрый ответ! :) –

Просто скопируйте этот код и сохраните его как placeholder.js.

(function($){ 

    $.fn.placeHolder = function() { 
     var input = this; 
     var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field 
     if (text) input.val(text).css({ color:'grey' }); 
     input.focus(function(){ 
     if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){  
      input.val("").css({ color:'black' }); 
     }); 
     }); 
     input.blur(function(){ 
     if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
     }); 
     input.keyup(function(){ 
     if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){ 
      input.val("").css({ color:'black' }); 
     });    
     }); 
     input.mouseup(function(){ 
     if (input.val() === text) input.selectRange(0,0); 
     }); 
    }; 

    $.fn.selectRange = function(start, end) { 
     return this.each(function() { 
     if (this.setSelectionRange) { this.setSelectionRange(start, end); 
     } else if (this.createTextRange) { 
      var range = this.createTextRange(); 
      range.collapse(true); 
      range.moveEnd('character', end); 
      range.moveStart('character', start); 
      range.select(); 
     } 
     }); 
    }; 

})(jQuery);

Для использования только на один вход

$('#myinput').placeHolder(); // just one

Это, как я рекомендую вам реализовать его на всех полях ввода на вашем сайте, когда браузер не поддерживает HTML5 заполнитель атрибуты:

var placeholder = 'placeholder' in document.createElement('input'); 
if (!placeholder) {  
    $.getScript("../js/placeholder.js", function() { 
     $(":input").each(function(){ // this will work for all input fields 
     $(this).placeHolder(); 
     }); 
    }); 
}

источник

2013-12-02 08:41:17

Javascript placeholder для IE8 не работает

ответ

Смежные вопросы