Html5 от Google не отображает заполнители? - PullRequest
Новая
       16

Html5 от Google не отображает заполнители?

4 голосов
/ 14 февраля 2012

У меня есть форма, которой клиенту нужны метки внутри поля ввода, и я решил использовать местозаполнитель HTML 5 и Google html5shiv вместо старого javascript. Однако мои заполнители, похоже, не работают должным образом в IE, для чего я и использовал 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>

Есть идеи, почему это не работает?

Редакция:

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

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

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

Прослушиватель событий, готовый к DOM: 

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

Ответы [ 2 ]

22 голосов
/ 14 февраля 2012

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

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

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

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

Вот демонстрационная версия: http://mathiasbynens.be/demo/placeholder

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

0 голосов
/ 18 февраля 2014

Проверьте также пакет NuGet Тодда Нортропа jquery.watermark. 

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

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

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

...