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

Хорошо, я использую 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>

blur jquery jquery-mobile onfocus
person Phill Pafford    schedule 14.02.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Мне удалось заставить ваш код работать с помощью 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>
person Gavin Anderegg    schedule 14.02.2011
comment
да, я включаю библиотеки, все остальное работает, но это. Тестирование из моего локального ящика в хроме - person Phill Pafford; 14.02.2011
comment
Я добавил код, который использовал выше. Этот фрагмент работает для вас? - person Gavin Anderegg; 14.02.2011
comment
Фактически! Нет вызова document.ready(). Я тоже иногда забываю об этом. - person Gavin Anderegg; 14.02.2011
comment
да это помогло. Мне нужно было добавить код после HTML. есть ли способ добавить код в заголовок вместо этого? - person Phill Pafford; 14.02.2011
comment
Обычно я помещаю весь свой JavaScript в ‹head›. Я включаю код как внешний скрипт, а затем все инициализирую в анонимной функции $(document).ready(). См. довольно сумасшедший пример на playandgive.ca. - person Gavin Anderegg; 14.02.2011

arrow_upward
9
arrow_downward

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

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

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

person naugtur    schedule 15.02.2011
comment
ВАУ здорово знать +1 за это - person Phill Pafford; 15.02.2011

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Astrotim    schedule 04.07.2012