在 IE9 中设置占位符 att答案

【问题标题】：Setting placeholder att in IE9在 IE9 中设置占位符 att
【发布时间】：2014-03-19 20:36:54
【问题描述】：

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

 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时没有添加占位符属性。

我该如何管理这个跨浏览器

谢谢

【问题讨论】：

IE9 不支持placeholder 属性，但有一些变通方法。查看类似问题的答案：stackoverflow.com/a/13281620/1423456

标签： javascript jquery html asp.net

【解决方案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'"/>

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

你的功能应该是这样的

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

【讨论】：

【解决方案2】：

据我所知 IE9 不支持placeholder 属性，所以它在 ie9 中不起作用。

Placehoder attribute not supported in ie9

You can follow this link to see the compatibility on caniuse.com

因此，您可以尝试以下解决方法：

function ClickYes() {      
  if(navigator.userAgent.indexOf("MSIE") > 0){
     $('#<%=txtMsg.ClientID%>').val('Tell me more');
  }else{
     $('#<%=txtMsg.ClientID%>').attr('placeholder', 'Tell me more');
  }
}

【讨论】：

【解决方案3】：

IE9 不支持placeholder 属性，您需要使用blur 和focus 事件来模拟此功能。

function ClickYes() {

    var element = $('#<%=txtMsg.ClientID%>');

    // default action (on moderns browsers) 
    var placeholder = function() {
        element.attr('placeholder', 'Tell me more');
    };

    if (navigator.appVersion.match(/MSIE [\d.]+/)) {
        // if MSIE: we override this function
        placeholder = function() {
            var placeholderText = 'Tell me more';
            element.val(placeholderText);
            element.blur(function(){
                $(this).val() == '' ? $(this).val(placeholderText) : false;
            });
            element.focus(function(){
                $(this).val() == placeholderText ? $(this).val('') : false;
            });
        };
    };

    placeholder(); // we call the created function
}

来源：placeholder is not working in IE9

【讨论】：

【解决方案4】：

我用的是place-holder.js，好用： PlaceHolder

您只能通过引用 jquery 和 placeholder.js 以及以下代码来使用它

$('input, textarea').placeholder();

【讨论】：