在 IE9 中设置占位符 att

Posted 2023-03-05

【中文标题】在 IE9 中设置占位符 att

【英文标题】：Setting placeholder att in IE9

【发布时间】：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 属性，但有一些变通方法。查看类似问题的答案：***.com/a/13281620/1423456

【参考方案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();