Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Кроссбраузерный placeholder с использованием библиотеки Modernizr (https://javascript.ru/forum/jquery/34528-krossbrauzernyjj-placeholder-s-ispolzovaniem-biblioteki-modernizr.html)

Heidel 08.01.2013 23:23

Кроссбраузерный placeholder с использованием библиотеки Modernizr
 
Делаю кроссбраузерный placeholder с использованием библиотеки Modernizr по книге К.Шмитта "HTML5. Рецепты программирования"

подключаю библиотеку к странице

<script src="script/jquery-1.8.3.min.js"></script>
    <script src="script/modernizr-latest.js"></script>


пишу такой скрипт

<script>
		if (!Modernizr.input.placeholder) {
			  $(".search_form_field").focus(function() {
				if ($(".search_form_field").val() == $(".search_form_field").attr('placeholder')) {
				  $(".search_form_field").val("");
				}
			  });
			  $(".search_form_field").blur(function() {
				if ($(".search_form_field").val() == "") {
				  $(".search_form_field").val($(".search_form_field").attr('placeholder'));
				}
			  });
			$(".search_form_field").blur();
			$(".search").submit(function() {
			  if ($(".search_form_field").val() ==
			$(".search_form_field").attr('placeholder')) {
			  return false;
			  }
			});
		}
	</script>


но в ие он все равно не срабатывает.
В чем может быть проблема?
Делаю вот для такой верстки, для формы ввода логина и пароля.

DjDiablo 09.01.2013 03:05

Старик давай для начала в более читабельный вид приведём код.

jQuery(function($){
    if (!Modernizr.input.placeholder) {

        var sField=$(".search_form_field");

        sField.focus(function() {
             var sf= $( this );
	         if ( sf.val() ==  sf.attr('placeholder') ) sf.val("");				
         });

        sField.blur(function() {
            var sf = $(this);
	        if ( sf.val() ==  "" )  sf.val( sf.attr('placeholder') );				
        });

        sField.blur();

        $(".search").submit(function() {
            var sf=$("#element"); 
  	        if (sf.val() ==sf.attr('placeholder')) return false;			  
        });
    }
})

вот теперь можно и IE заняться, хотя возможно он заработал уже :)

ЗЫ.
1)я заменил $(".search_form_field") на $("#element"); в submit,
так как использование класса подразумевает то что у тебя может быть несколько полей с классом .search_form_field
а это значит обращение к val() в этом случае приведёт к ошибке.

хотя совсем в идеале выборку для sField нужно делать не по классу .search_form_field а по наличию атрибута placeholder

2)теперь скрипт срабатывает только после готовности страницы.


Часовой пояс GMT +3, время: 01:57.