2012-02-14 2 views
4

У меня есть форма, которой клиент хочет метки внутри поля ввода, и я решил использовать заполнитель HTML 5 и html5shiv Google вместо старого javascript. Тем не менее, мои заполнители не работают должным образом в IE, для чего я использую shiv. Вот код:Google html5 shiv не создает заполнители?

Doctype:

<!DOCTYPE html> 

Шив:

<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> 
<![endif]--> 

Форма:

<form method="post" enctype="multipart/form-data" name="contactForm" id="contactForm"> 

    <input type="text" name="name" id="name" placeholder="Your Full Name..." /> 
    <input type="text" name="telephone" id="telephone" placeholder="Your Telephone Number..." /> 
    <input type="email" name="email" id="email" placeholder="Your Email Address..." /> 
    <textarea name="enquiry" id="enquiry" placeholder="Your Enquiry or Comments..."></textarea> 
    <p class="midpadLeft green_Button_margin_2"><span class="green_Button_2"><a href="javascript: document.contactForm.submit();" target="_self" class="green_Button_2">Submit Enquiry <img src="images/mid-envelope.png" alt="Submit"/></a></span></p> 

</form> 

Любые идеи, почему это не работает?

Редакция:

Использование кода предлагается в комментариях ниже, я изменил свой код к следующему, но он по-прежнему не работает.

сценария, включая (содержимое этого сценария был скопирован непосредственно из here):

<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script> 

DOM готов слушатель события:

<body onload="Placeholders.init(true);"> 
+1

Кажется, что нет ссылки на атрибуты заполнителя [в коде] (https://github.com/aFarkas/html5shiv/tree/master/src). Предполагается ли, что html5shiv должен их подкрепить? – pimvdb

+1

Насколько я знаю, html5shiv ничего не делает для атрибута 'placeholder'. Доступны различные прокладки (в основном jQuery) ... см. [Modernizr] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) для списка или [моя собственная попытка] (https://github.com/jamesallardice/Placeholders.js) (который не требует jQuery) –

+0

@JamesAllardice Я пробовал ваш код, но он не работает. См. Ревизию –

ответ

22

HTML5, Шив просто позволяет стайлинг ранее неизвестных элементов в IE , В последней версии есть несколько дополнительных вещей, например, исправление document.createElement, но кроме этого он ничего не полирует.

Если вы хотите эмулировать placeholder, используйте заполнитель заполнителя. Я написал один в формате плагина Jquery, если вы заинтересованы: http://mths.be/placeholder

Используйте его следующим образом:

$('input, textarea').placeholder(); 

Вот демо: http://mathiasbynens.be/demo/placeholder

Btw, вы должны использовать вместо <label> от @placeholder, если текст «Ваше полное имя» и т. д.

+0

У меня возникла проблема с использованием asp: TextBox с этим скриптом. Элемент управления имеет привязанный к нему элемент управления RequiredValidator asp, который не имеет значения, что приводит к сообщению. Удаление плагина-заполнителя исправляет это. Любое решение? –

+0

@ Mathias хороший плагин-заполнитель! Спасибо! – lizardhr

0

Посмотрите также пакет jQuery.watermark от NdGet от Todd Northrop.

//polyfill placeholder in older browsers 
var inputs = $('input, textarea'); 

$.each(inputs, function (i, itm) { 
    var input = $(itm); 
    input.watermark(input.attr('placeholder')); 
}); 

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

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