HTML占位符不会出现在屏蔽的输入类型上

Question

我正在使用 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();

Answer 1

以下脚本完全解决了我在 MSIE 9 到 11 中没有显示“商务电话”的问题。希望这会有所帮助。

Placeholders.js 是 HTML5 占位符属性的 JavaScript polyfill。它是轻量级的，具有零依赖性，并且几乎可以在您能想象的任何浏览器中运行。

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>