有没有我可以使用的 js 函数来使占位符属性在 IE 中工作？ [复制]

Posted 2023-03-05

【中文标题】有没有我可以使用的 js 函数来使占位符属性在 IE 中工作？ [复制]

【英文标题】：Is there a js function I could use that would make the placeholder attribute work in IE? [duplicate]

【发布时间】：2013-07-27 08:17:42

【问题描述】：

现在我的项目中有一堆使用占位符的输入标签，如下所示：

<input id="Name" name="Name" placeholder="Name Goes Here" type="text" value="">

如果浏览器是 IE，我可以在全局 js 脚本中放置一个 js 函数来更改输入标签吗？

例如，如果浏览器是 Internet Explorer，我可以运行一个特定的 javascript 函数，将我的所有占位符更改为 IE 使用的东西（如果它存在的话）

【问题讨论】：

IE10 支持占位符属性。在低级版本中，您需要像 falinsky 建议的那样使用 shim。

【参考方案1】：

// Detect the browser, as you want. I'm using the follwowing way
var browserName=navigator.appName; 
if (browserName=="Microsoft Internet Explorer") 
 
    replacePlHolders();



// replace all the placeholders with a simple text input
function replacePlHolders()

   var plInps = $("input[placeholder]");

   plInps.each(function()
        var name=$(this).attr("name");
        var newInput = $("<input type='text' name='"+name+"' value='"+name+" goes here'>");

         $(this).replaceWith(newInput);
         var defaultValue = name + " goes here";

         newInput.on('focus', function()                  

                    // If this value of the input equals our sample,
                    // hide it when the user clicks on it.

                    if(this.value === defaultValue)
                       this.value = '';
              );

              newInput.on('blur', function() 
                    // When they click off of the input, if
                    // the value is blank, bring back the sample.
                    if(this.value === '')
                         this.value = defaultValue;
               );
   );

将此代码放在您的全局 Javascript 文件中，这将为您带来神奇的效果。

检查小提琴here

【参考方案2】：

请查看jquery-html5-placeholder-shim

【讨论】：

效果很好。

我使用了你给我的插件，它可以工作。但是，当我导航到其他页面时，它会停止工作。有没有办法让我点击的每个页面都运行这个插件？谢谢

你应该在每个页面上都包含这个插件...

【参考方案3】：

if(!Modernizr.input.placeholder)
    $('[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();
    $('[placeholder]').parents('form').submit(function()
        $(this).find('[placeholder]').each(function()
            var input = $(this);
            if(input.val() == input.attr('placeholder'))
                input.val('');
            
        );
    );