Заполнитель HTML не отображается в замаскированном типе ввода

Question

Заполнитель HTML не отображается в замаскированном типе ввода

0

Я использую mathiasbynens/jquery-placeholder, и все работает очень хорошо во всех версиях браузера, что для меня важно, потому что большинство наших клиентов использует IE7,8.

Но, как обычно, в Internet Explorer есть проблемы. У меня есть один тип ввода, именно это номер телефона, который замаскирован, и когда я был отключен, маскировка этого заполнителя полей появляется в IE, иначе он не появляется. Как я могу исправить это, чтобы работать с элементами, которые имеют маску.

Вот код:

 <input type="text" name="phone_number" id="phone_number_btd"  value="<?php echo $phone_number; ?>" placeholder="Phone Number"/>


$("#phone_number_btd").mask("(999) 999-9999? x9999");

и ниже - код для вызова функциональности-заполнителя:

     (jQuery)('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
          input.removeClass('placeholder');
        }
      }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
          input.addClass('placeholder');
          input.val(input.attr('placeholder'));
        }
      }).blur();

user2834820 04 окт. 2013, в 13:15

Источник

0

Можете ли вы предоставить jsFiddle этой проблемы?
Mr Lister 04 окт. 2013, в 11:07
0

К сожалению, это сложно, потому что мне нужно включить много файлов, поэтому я нашел решение. Это не лучший способ, но он работает. Я игнорирую маскировку, если браузер Internet Explorer.
user2834820 04 окт. 2013, в 11:20

Теги:

jquery

html

html5

placeholder

1 ответ

Ещё вопросы

Можете ли вы предоставить jsFiddle этой проблемы?
К сожалению, это сложно, потому что мне нужно включить много файлов, поэтому я нашел решение. Это не лучший способ, но он работает. Я игнорирую маскировку, если браузер Internet Explorer.

David Roberts · Answer 1 · 2014-04-20T13-59-00.000Z

Следующий сценарий полностью разрешил проблему, с которой я столкнулся с "Деловым телефоном", который не отображается в MSIE с 9 по 11. Надеюсь, это поможет.

Placeholders.js - это полисполк JavaScript для атрибута placeholder HTML5. Он легкий, имеет нулевые зависимости и работает практически в любом браузере, который вы можете себе представить.

https://jamesallardice.github.io/Placeholders.js/

    <script src="CHANGE-TO-PATH-AFTER-DOWNLOADED/placeholders.min.js"></script>

    <section>
    <label class="">
    <input type="tel" name="phone" id="phone" placeholder="Business Phone">
    </label>
    </section>


    <script type="text/javascript">
     $(function()
     {
      // Masking
         $("#phone").mask('(999) 999-9999', {placeholder:'X'});
      // $("#date").mask('99/99/9999', {placeholder:'X'});
      // $("#card").mask('9999-9999-9999-9999', {placeholder:'X'});
      // $("#serial").mask('***-***-***-***-***-***', {placeholder:'_'});
      // $("#tax").mask('99-9999999', {placeholder:'X'});
     });            
    </script>

С {placeholder: 'X'}, maskedInput работает, но Placeholder.js не работает, без него Placeholder.js работает, а maskedInput - нет. : /