javascript - 在 IE9 中设置占位符 att

Question

我有以下基于按钮点击运行的代码。

 function ClickYes() {      
      $('#<%=txtMsg.ClientID%>').attr('placeholder', 'Tell me more');
    }

按钮声明如下

<button type="button" class="com-yes-btn2 feedback-btn-grey empx11b12" id="btnYes" onclick="javascript:ClickYes();">

</button>

问题是我需要根据事件动态设置占位符 att，在 chrome 和 firefox 中行为是正确的，但在使用 IE9 时未添加占位符属性。

我如何管理这个跨浏览器

谢谢

Answer 1

是 IE 9 不支持占位符。但是你可以看看周围的一些替代品，比如 javascript 来很容易地实现这一点

<input type="text" placeholder="test" value="placeholder text" 
onfocus="if (this.value=='placeholder text') this.value = ''" onblur="if (this.value=='') this.value = 'placeholder text'"/>

但是在使用这种方法时需要小心，因为这种方法设置了 textbox 的 value。因此，当您检索它时，您将获得该值。因此，无论何时使用它，都需要检查占位符值。

你的函数应该是这样的

function ClickYes() {      
      // for modern browsers
      $('#txtMsg').attr('placeholder', 'Tell me more');

      // for older browsers
      $('#txtMsg').val('Tell me more');
      $('#txtMsg').css('color','#CCC');
    }

现在你需要处理 focus 和 blur 事件，让它像这样完成

 $(document).ready(function () {
    $("#txtMsg").focus(function () {
       if ($(this).val() == 'Tell me more') {
          $(this).val('');
          $(this).css('color', 'black');
       }
    });
    $("#txtMsg").blur(function () {
       if (!$(this).val()) {
          $(this).val('Tell me more');
          $('#txtMsg').css('color', '#CCC');
       }
    });
 });

Js Fiddle Demo

Js Fiddle Demo 2