javascript - 有没有我可以使用的 js 函数来使占位符属性在 IE 中工作？

Question

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

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

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

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

Answer 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 文件中，这将为您带来神奇的效果。

在这里检查小提琴

Answer 2

请查看 jquery-html5-placeholder-shim

Answer 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('');
            }
        });
    });
}