Как получить текст-заполнитель в Firefox и других браузерах, которые не поддерживают параметр тега html5?

Question

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

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

Но он не работает в 3.5 и более ранних версиях Firefox и, очевидно, IE8 и, возможно, других браузеров.1004 *

Как мне добиться того же (желательно в HTML / CSS - если нет, я открыт для предложений), чтобы поддерживать все старые браузеры?Если не каждый браузер, то, по крайней мере, Firefox и IE.

Safari и Chrome уже поддерживают его (или в любом случае последние версии).

Спасибо.

Answer 1

Однажды я доберусь до правильного документирования этого, но посмотрите на этот пример: http://dorward.me.uk/tmp/label-work/example.html

Короче - расположите <label> под прозрачным <input>, используя <div>, чтобы обеспечить фонцвет и границы.

Затем используйте JS, чтобы определить, должна ли метка быть видимой или нет на основе фокусировки.

Примените другие стили, когда JS недоступен, чтобы вместо этого разместить метку рядом с элементом.

В отличие от использования value, это не делает контент недоступным для устройств, которые отображают только сфокусированный контент (например, программы чтения с экрана), а также работает для входов типа password.

Answer 2

Я использую это: https://github.com/danbentley/placeholder
Легкий и простой плагин jQuery.

Answer 3

Вот самое простое решение, которое я нашел работающим везде:

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

Замените PLACEHOLDER своим собственным.

В настоящий момент FF3 еще не поддерживает атрибут placeholder элемента input.FF4, Opera11 и Chrome8 поддерживают его частично, то есть они отображают текст заполнителя в поле, но не удаляют его, когда пользователь фокусируется на поле, что еще хуже, чем вообще его не поддерживают.

Answer 4

Вот плагин MooTools, который добавляет заполнитель в браузеры, которые его еще не поддерживают:

http://mootools.net/forge/p/form_placeholder

Answer 5

Я использую следующий фрагмент, который я написал с помощью jQuery. Просто добавьте класс textbox-auto-clear в любое текстовое поле на странице, и все будет хорошо.

<input type="text" value="Please enter your name" class="textbox-auto-clear" />

$(".textbox-auto-clear").each(function(){
    var origValue = $(this).val(); // Store the original value
    $(this).focus(function(){
        if($(this).val() == origValue) {
            $(this).val('');
        }
    });
    $(this).blur(function(){
        if($(this).val() == '') {
            $(this).val(origValue);
        }
    });
});

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

Еще лучше, вы можете использовать библиотеку Modernizer , как указано в этом ответе. Обнаружение поддержки определенных функций HTML 5 с помощью jQuery

Answer 6

Я использую это: https://github.com/Jayphen/placeholder Этот легкий и простой плагин jQuery является ответвлением от danbentley / placeholder.

Преимущество: он добавляет класс "заполнитель" к полям ввода, которые временно заполнены. Css ".placeholder {color: silver}" заставляет текст с заливкой выглядеть как заполнитель вместо обычного ввода текста.

Недостаток: он не заполняет заполнитель поля пароля.

Answer 7

Хитрость заключается в том, чтобы использовать функции JavaScript onBlur () и onFocus ().

Вот код, который работал для меня:

<script language="javascript" type="text/javascript" >

    var hint_color = "grey", field_color = null;

    var hinted = true;

    function hint() { // set the default text

        document.getElementById('mce-EMAIL').style.color = hint_color;
        document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";

        hinted = true;

    }

    function hintIfEmpty() { // set the default text, only if the field is empty

        if (document.getElementById('mce-EMAIL').value == '') hint();

    }

    function removeHint() {

        if (hinted) {

            document.getElementById('mce-EMAIL').style.color = field_color;
            document.getElementById('mce-EMAIL').value = "";

            hinted = false;

        }

    }

    function send() {

        document.getElementById('subscription_form').submit();
        hint();

    }

</script>

<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
    <a href="javascript:send()"><font style="position: relative; top:-1px;"><b>ok</b></font></a>

</form>
</div>

<script language="javascript" type="text/javascript" >

    field_color = document.getElementById('mce-EMAIL').style.color;
    hint();

</script>

SUBSCRIPTION_HINT (т. Е. «Ваша электронная почта») и SUBSCRIPTION_LINK (т. Е. Значение тега «action» в коде встраивания EN mailchimp ...) являются константами PHP, используемыми для локализации.

Answer 8

Кстати ... если кому-то интересно ... Я нашел красивое элегантное решение, которое представляет собой плагин jQuery, который очень приятен.

Буквально это одна строка jQuery, минимизированный плагин js, вместе с простым именем класса на входе.

http://labs.thesedays.com/projects/jquery/clearfield/

Это самая красивая вещь, которую я обнаружил, рядом с "Заполнителем" в html.

Answer 9

Для работы " placeholder " в Firefox просто добавьте атрибут

:: - moz-placeholder

в тегах CSS.*

Answer 10

У меня работает, измени свой CSS на

::-webkit-input-placeholder {
  color: #999;
}