I want to support the placeholder attribute with the input tag in Internet Explorer 6-8 using the jquery.placeholder.js file. But something does not work, tell me what is the error?

<!DOCTYPE html> <html> <head> <title>Регистрация</title> <link href="/bookshop/css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/bookshop/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="/bookshop/js/jquery.placeholder.js"></script> <script type="text/javascript"> $(function() { function hasPlaceholderSupport() { var i = document.createElement('input'); return 'placeholder' in i; } if(!hasPlaceholderSupport()) { $("#create_account").placeholder(); //END placeholder_fallback $('input[autofocus=true]').focus(); }; }); </script> </head> <body> <form id="create_account" action="registration.php" method="POST"> <fieldset id="singup"> <legend>Создайте новый аккаунт</legend> <ol> <li> <laber for="firstname">Имя:</label> <input id="firstname" type="text" autofocus="true" name="firstname" placeholder="John"> </li> <li> <laber for="lastname">Фамилия:</label> <input id="lastname" type="text" name="lastname" placeholder="Smith"> </li> <li> <laber for="email">Email:</label> <input id="email" type="text" name="email" placeholder="user@eample.com" autocomplete="off"> </li> <li> <laber for="password">Пароль:</label> <input id="password" type="password" name="password" value="" autocomplete="off" placeholder="8-10 символов"> </li> <li> <laber for="password_confirm">Повторите пароль:</label> <input id="password_confirm" type="password" name="password_confirm" value="" autocomplete="off" placeholder="Введите пароль еще раз"> </li> <li> <input type="submit" value="Зарегистрироваться"> </li> </ol> </fieldset> </form> </body> </html>

jquery.placeholder.js

 function ($) { $.fn.placeholder = function () { function valueIsPlaceholder(input) { return ($(input).val() == $(input).attr("placeholder")); } return this.each(function () { $(this).find(":input").each(function () { if ($(this).attr("type") == "password") { var new_field = $("<input type='text'>"); new_field.attr("rel", $(this).attr("id")); new_field.attr("value", $(this).attr("placeholder")); $(this).parent().append(new_field); new_field.hide(); function showPasswordPlaceholder(input) { if ($(input).val() == "" || valueIsPlaceholder(input)) { $(input).hide(); $('input[rel=' + $(input).attr("id") + ']').show(); }; }; new_field.focus(functon() { $(this).hide(); $('input#' + $(this).attr("rel")).show().focus(); }); $(this).blurfuncton() { showPasswordPlaceholder(this, false); }); showPasswordPlaceholder(this); } else { //Значение заменяется заполняюшим текстом. //Необязательный параметр reload решает проблему //кэширования полей в FF и IE. function showPlaceholder(input, reload) { if ($(input).val() == "" || (reload && valueIsPlaceholder(input))) { $(input).val($(input).attr("placeholder")); } }; $(this).focus(function () { if ($(this).val() == $(this).attr("placeholder")) { $(this) val(""); }; }); $(this).blur(function () { showPlaceholder($(this), false) }); showPlaceholder(this, true); }; }); //Заполняющийся текст не должен отправляться формой $(this).submit(function () { $(this).find(":input").each(function () { if ($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }); }); }); })(jQuery);
  • there was a question in the first line return ($ (input) .val () == $ (input). attr ("placeholder")) - makregistr
  • Can you explain what is wrong in this line of code? Thank you in advance. - spoilt
  • Everything finally earned! The topic can be closed. - spoilt

3 answers 3

Just do $ ('[placeholder]'). Placeholder ();

  • Thanks, by the way, firebug helped me find errors! Great thing, I recommend everyone to install and use! www.firebug.ru - spoilt

The same problem was. It does not work with jQuery 1.7 (well, at least with exactly 1.7.2). I know that it works from 1.5.4, it still lies on 1.6.4, but it also does not work on 1.7.2. So either look for another plugin, or install the appropriate version of jQuery.

  • It works with jQuery 1.7.2, after I fixed all the errors in the code) - spoilt

Here is the working version of the jQuery code:

 (function($) { $.fn.placeholder = function() { function valueIsPlaceholder(input) { return ($(input).val() == $(input).attr("placeholder")); } return this.each(function() { $(this).find(":input").each(function() { if($(this).attr("type") == "password") { var new_field = $("<input type='text'>"); new_field.attr("rel", $(this).attr("id")); new_field.attr("value", $(this).attr("placeholder")); $(this).parent().append(new_field); new_field.hide(); function showPasswordPlaceholder(input) { if($(input).val() == "" || valueIsPlaceholder(input)) { $(input).hide(); $('input[rel=' + $(input).attr("id") + ']').show(); }; }; new_field.focus(function() { $(this).hide(); $('input#' + $(this).attr("rel")).show().focus(); }); $(this).blur(function() { showPasswordPlaceholder(this, false); }); showPasswordPlaceholder(this); }else{ //Значение заменяетсязаполняюшим текстом. //Необязательный параметр reload решает проблему //кэширования полей в FF и IE. function showPlaceholder(input, reload){ if($(input).val() == "" || (reload && valueIsPlaceholder(input))) { $(input).val($(input).attr("placeholder")); } }; $(this).focus(function() { if($(this).val() == $(this).attr("placeholder")) { $(this).val(""); }; }); $(this).blur(function() { showPlaceholder($(this), false) }); showPlaceholder(this, true); }; }); //Заполняющийся текст не должен отправляться формой $(this).submit(function() { $(this).find(":input").each(function() { if($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }); }); }); }; })(jQuery);