очистить текст по умолчанию в элементах поля формы для мобильного сайта - PullRequest
Новая
       9

очистить текст по умолчанию в элементах поля формы для мобильного сайта

1 голос
/ 14 февраля 2011

Хорошо, я использую jQuery Mobile Framework , и я хотел бы иметь возможность использовать значения по умолчанию в текстовой или текстовой области в качестве вспомогательного текста.Но в фокусе очистите текст и сохраните вновь введенное значение.Также на перефокус (скажем, они снова коснулись его по ошибке), чтобы не сбрасывать значение снова.

Я включаю эти 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

Пример не работает

Добавление этого на саму страницу: ( ссылка на пример ) 

<script type="text/javascript">
    $('.default-value').each(function() {
        var default_value = this.value;
        $(this).focus(function() {
            if(this.value == default_value) {
                this.value = '';
            }
        });
        $(this).blur(function() {
            if(this.value == '') {
                this.value = default_value;
            }
        });
    });
</script>

Вот HTML-код (он тоже в теге формы) 

<!-- Address 2 -->
<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

Ответы [ 3 ]

9 голосов
/ 15 февраля 2011

Для будущих поколений: в HTML5 есть вещь под названием заполнитель 

<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #"  />

Заполнитель в настоящее время поддерживается в новейших браузерах на основе webkit.

3 голосов
/ 14 февраля 2011

Мне удалось заставить ваш код работать, используя jQuery 1.5 и jQuery Mobile 1.0a3.Вы включили jQuery, а также jQuery Mobile?Для работы jQuery Mobile требуется версия jQuery.

Редактировать: Следует отметить, что я проверял это только на симуляторе iPhone, а не на реальном устройстве.Симулятор работал под управлением iOS 4.0.1. 

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>

<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.default-value').each(function() {
            var default_value = this.value;
            $(this).focus(function() {
                if(this.value == default_value) {
                    this.value = '';
                }
            });
            $(this).blur(function() {
                if(this.value == '') {
                    this.value = default_value;
                }
            });
        });
    });
</script>
0 голосов
/ 04 июля 2012

В дополнение к атрибуту-заполнителю ввода HTML5, который ведет себя точно так же, как описанный вами вспомогательный текст ;jQuery Mobile рекомендует использовать поле метки с классом «ui-hidden-available»:

Для удобства jQuery Mobile требует, чтобы все элементы формы были сопряжены со значимой меткой

http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html

Затем вы можете использовать Modernizr для определения поддержки атрибута заполнителя и, если он не поддерживается, использовать полифилл ( как этот ) или удалитьUI-скрытый доступный класс, который будет отображать метки. 

if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
    .removeClass('ui-hidden-accessible')
    .addClass('ui-accessible');
}

, а затем стиль новой метки по желанию.Я обнаружил, что подход с полифилом не работает, когда в поле ввода type = "password", поэтому в этом случае лучше скрывать метку.

...