Форма ввода на фокус проблемы - PullRequest
Новая
       5

Форма ввода на фокус проблемы

1 голос
/ 13 августа 2011

Я хочу использовать jQuery Masked Input Plugin (http://digitalbush.com/projects/masked-input-plugin/) в моей регистрационной форме. Моя форма выглядит так

... 

<input  class="part1" type="text" name="lname"  value="Last Name" onfocus="if(this.value=='Last name') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Last name'}"  />
<input class="part2" type="text" id="dob" name="dob"  value="Date of Birth" onfocus="if(this.value=='Date of Birth') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Date of Birth'}" />

...

a конец файла 

<script src="core/code/js/mask.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('#dob').mask('99.99.9999', {placeholder:' '});
});
</script>

Когда вы открываете страницу, поле Фамилия показывает слово «Фамилия», но дата рождения ничего не показывает. http://prntscr.com/2miaa Как можноактивировать плагин для маски только для события onfocus?

1 Ответ

6 голосов
/ 13 августа 2011

Ярр ... Хорошо, сначала не помещайте так много скриптов в вашу разметку.Его трудно читать, и его будет еще сложнее поддерживать.Давайте сначала попробуем разделить стиль и функциональность вашей формы.

Редактировать: Рабочий пример этого можно найти по адресу http://jsfiddle.net/ninjascript/RuFHK/2/

CSS 

input { color: #aea592; }
input.default { font-style: italic; }

HTML 

<input class="part1 default" type="text" name="lname" value="Last Name"/>
<input class="part2 default" type="text" id="dob" name="dob" value="Date of Birth"/>

JavaScript 

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
});

тьфу ... Хорошо, это немного легче понять.Теперь вы хотите, чтобы только еще одна вещь происходила в фокусе, и это для применения маски к значению, содержащемуся в элементе #dob.Вот отредактированный блок: 

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

Теперь ваш ввод должен only быть замаскирован после того, как он получит фокус.

Если вы хотите убедиться, что some значение возвращается при отправке, вы всегда можете проверить содержимое на «размытие».Мне не очень хочется писать if операторов для каждого поля в этой форме, поэтому я просто собираюсь сопоставить каждое имя поля и его значение по умолчанию и сослаться на это: 

var defaultValues = {
    'lname': 'Last Name',
    'dob': 'Date of Birth'
};

Теперь я могу просто обращаться к этой карте всякий раз, когда мне нужно заполнить поле моими значениями по умолчанию.В случае поля DOB, похоже, что плагин входной маски также имеет опцию «unmask».К сожалению, поскольку символы в пределах mask являются частью значения поля #dob, мы не можем просто проверить пустое значение.Вместо этого я собираюсь использовать регулярное выражение, которое проверяет значение, которое состоит только из пробелов и '.'символы: 

$('input').bind('blur', function() {
    var el = $(this);
    var name = el.attr('name');

    // Really we only want to do anything if the field is *empty*
    if (el.val().match(/^[\s\.]*$/)) {

        // To get our default style back, we'll re-add the classname
        el.addClass('default');

        // Unmask the 'dob' field
        if (name === 'dob') {
            el.unmask();
        }

        // And finally repopulate the field with its default value
        el.val(defaultValues[name]);
    }
});
...