Javascript IE9中的占位符

这似乎是一个众所周知的问题，但我在谷歌上找到的所有解决方案在我新下载的IE9上都不起作用

要在输入和文本区域标记上启用占位符属性，您最喜欢哪种方式

---

可选：我在这方面浪费了很多时间，还没有找到所需的财产。你对此也有什么建议吗？显然，我可以在PHP中检查该值，但为了帮助用户，该属性非常方便。

我认为这就是您要寻找的：

---

此解决方案使用功能检测通过来确定是否支持占位符。如果没有，则通过jQuery添加支持。

如果不想使用jQuery或modenizer，则可以使用以下代码：

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

对于每个要使用它的文本字段，您需要运行Placeholder HtmlinPutElement，但我想您可以根据需要更改它！此外，这样做，而不仅仅是在加载时，意味着您可以使它在加载页面时为DOM中不存在的输入工作

---

请注意，这是通过将class:usingPlaceHolder应用于输入元素来实现的，因此您可以使用它来设置输入元素的样式，例如添加规则。使用placeholder{color:999；font-style:italic；}使其看起来更好。

如果您想输入描述，可以使用它。这适用于IE9和所有其他浏览器

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>

---

这里有一个更好的解决方案。 我已经采用了它，只在IE10下的浏览器上工作

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>

HTML5占位符jQuery插件 -由合作者在和

演示和示例

p、

---

我已经使用这个插件很多次了，它的效果非常好。另外，当您提交表单时，它不会将占位符文本作为值提交。。。我在其他插件中发现了一个真正的痛苦。

我通常对它们评价很高，它们列出了：

不确定这是谁的代码，但看起来很简单：

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});

---

要使它在IE-9中工作，请使用下面的。它适合我

JQuery需要包括：

jQuery(function() {
   jQuery.support.placeholder = false;
   webkit_type = document.createElement('input');
   if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
   $(function() {

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

.hasPlaceholder {color: #aaa;}

CSS样式需要包括：

jQuery(function() {
   jQuery.support.placeholder = false;
   webkit_type = document.createElement('input');
   if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
   $(function() {

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

.hasPlaceholder {color: #aaa;}

---

我在互联网上搜索，找到了一个简单的jquery代码来处理这个问题。在我这边，它被解决了，并在ie 9上工作

$("input[placeholder]").each(function () {
        var $this = $(this);
        if($this.val() == ""){
            $this.val($this.attr("placeholder")).focus(function(){
                if($this.val() == $this.attr("placeholder")) {
                    $this.val("");
                }
            }).blur(function(){
                if($this.val() == "") {
                    $this.val($this.attr("placeholder"));
                }
            });
        }
    });

---

虽然参加派对有点晚，但我使用了我久经考验且值得信赖的JS，利用了它。可以复制/粘贴并应用于任何项目。每次工作：

// Placeholder fallback
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('');
        }
      })
    });

}

为了检测不支持占位符的浏览器，我创建了这个简短的代码来修复它们

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}

---

我知道我迟到了，但我找到了一个解决方案，在头部插入标签：

---

---

4年后我又回到了HTML。这意味着我愿意接受任何建议，更换我过时的工具。我几乎从零开始重新启动。我一直在尝试使用JQuery和许多google结果的复制/过去，我的It工作正常，但它不是最好的代码。在顶部$处，应将其分配给可在整个代码中使用的变量。对于每个使用$this的表达式调用$this是一个直接的否定，因为不要像这样编写jQuery 101。您必须小心使用此代码，因为如果您提交表单，占位符值将作为表单值提交。应该在提交之前清除它。好奇，因为我是HTML 5功能之战的新手：是modernizer导致这是一个糟糕的解决方案，还是jquery-html5-placeholder-fix本身，或者两者都是？更新了链接，修复了上述注释中的问题。注释要求使用带有HTML输入功能的modernizer脚本在IE8上不起作用，因为IE不允许jQuery操作输入类型2011年12月20日下午1:48从Bill中签出评论也假设您正在提交表单。我见过的大多数单页应用程序都不使用表单。只需单击处理程序。我们正在使用自定义CRM。我按预期添加了这段代码和作品，但他们通过javascript提交表单。提交按钮具有onclick=\u IW.FormsRuntime.submitthis.form；。我是否可以更改此onclick事件，首先清除占位符，然后运行onclick中存在的CRM代码？我将github js文件复制到我的src代码中。仍然不能使用占位符。这确实是一种享受，但是在单页应用程序中使用它是一种痛苦。对于动态添加的字段，您需要手动触发它。除此之外，它工作得很好！谢谢，整洁的插件，但是我有一个问题是ie9当文本输入聚焦时占位符消失了。这与HTML5 behaviorIt不同，它可以很好地处理一个大的'but'，$'input'。当输入为空时，val返回占位符值。因为我使用的是AJAX框架，占位符被发送到服务器上……这个插件需要原型库，我自己也不测试它，但是如果你点击这个字段而不是点击它，猜测这不会很好。我在很多网站或类似网站上都看到了这个错误。使用这个解决方案，你还需要在表单提交中检查这个值。我很惊讶这个值得到了任何投票，即使在2012/2013年发布时也不应该使用这个值。如果你碰巧在输入中写入了应该是占位符“CV2:”的内容，你键入的内容将被删除。对不起，我真的不知道

---

我不知道这是否容易做到——我想你应该想显示实际的文本值，而不是符号。我能想到的唯一方法就是将其切换为文本输入，除非它有焦点或值，否则将其显示为密码字段。@StephenPatten请查看带有密码字段的占位符。我正是按照马克的建议做的：你应该在这里修改你的格式，比如添加缩进，把你的答案和代码分开。你的占位符变成了值。如果您提交，它们将被发送。有了正确答案的placeholder.js，所有使用jQuery的解决方案的字段都保持为空。没有臃肿的jQuery就没有解决方案了吗？您必须小心使用此代码，因为如果您提交表单，占位符值将作为表单值提交。您应该在提交之前清除它。@chriscatfr：在本例中，如何正确地执行此操作？如果我的占位符是“Password”，而我的密码实际上是“Password”？您可以对这样的字段使用dirty的概念。输入时将字段标记为clean，可能使用data dirty=false。如果他们提交表单而不更改占位符文本，您将看到该字段是干净的，请清除它。如果他们确实更改了它，甚至更改为与占位符相同的值，那么它是脏的，您确实提交了该值。对于密码和其他解决方案，请查看占位符属性是标准化的，因为字符串=>实际上不需要现代化：：：：：：：：：：：：：：：：：：If typeof$.get0.placeholder==未定义的{…}enaugh测试是否不支持，在IE9模式模拟中测试-有效。您在IE9中测试过吗？因为IE10+支持占位符…当然，很奇怪，IE9本身不支持它，标签会打开它-那是一个实验性的特性吗？这是在什么地方引用的吗