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

Ответ 1

Кстати... если кто-то заинтересован... Я нашел красивое элегантное решение, которое является плагином jQuery, который является SOOO приятным.

В буквальном смысле это одна строка jQuery, миниатюрный js-плагин, а также простое имя класса на входе.

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

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

Ответ 2

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

В короткой позиции a <label> под прозрачным <input> с использованием <div> для обеспечения цвета фона и границ.

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

Применяйте разные стили, когда JS недоступен для размещения метки рядом с элементом.

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

Ответ 3

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

Ответ 4

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

<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 частично поддерживают его, т.е. Отображают текст-заполнитель в поле, но не удаляют его, когда пользователь фокусируется в поле, что хуже, чем вообще не поддерживать его.

Ответ 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 только к браузерам, которые его не поддерживают.

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

Трюк заключается в использовании функций 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 (т.е. значение тега "действие" в коде для вставки кода электронной почты EN...) - это константы PHP, используемые для локализации.

Ответ 9

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

:: - Мос-заполнитель

в тегах CSS.