IE9中的占位符


140

看来这是一个众所周知的问题,但是我在Google上找到的所有解决方案都不适用于我新下载的IE9。

您最喜欢哪种方式启用and 标签Placeholder上的属性?inputtextarea

可选:我为此花了很多时间,而且还没有去寻找required房产。您对此还有意见吗?显然,我可以在PHP中检查该值,但是对于帮助用户使用此属性非常方便。


4年后,我重新使用HTML。意思是我愿意接受任何建议更换我过时的工具。我几乎从零开始重启。我一直在尝试使用JQuery以及从Google结果中进行的许多复制/
粘贴

Answers:


185

HTML5占位符jQuery插件
-通过的Mathias Bynens(上协作者HTML5样板jsPerf

https://github.com/mathiasbynens/jquery-placeholder

演示与范例

http://mathiasbynens.be/demo/placeholder

ps
我已经使用了这个插件很多次了,并且可以正常工作。此外,当您提交表单时,它不会提交占位符文本作为值(...我在其他插件中发现的真痛)。


我们正在使用自定义CRM。我按预期添加了此代码和作品,但他们通过javascript提交了表单。提交按钮有onclick="_IW.FormsRuntime.submit(this.form);"。无论如何,我是否可以更改此onclick事件以首先清除占位符,然后运行onclick中存在的此CRM代码?
Leeish

1
我将github js文件复制到了我的src代码中。占位符仍然不可行。
Philo

2
这确实有效,但是在单页应用程序上使用却很痛苦。您需要为动态添加的字段手动触发它。除此之外,效果很好!
smets.kevin 2013年

1
谢谢,简洁的插件,但是我遇到的一个问题是ie9,当文本输入焦点对准时,占位符消失了。这与HTML5行为不同
gerrytan 2014年

1
它与一个大的“ but”很好用,$('input')。val()在输入为空时返回占位符值。因为我使用的是AJAX框架,所以占位符已发送到服务器...
Danubian Sailor 2014年

21

我认为这是您要寻找的:jquery-html5-placeholder-fix

该解决方案使用功能检测(通过modernizr)来确定是否支持占位符。如果不是,则添加支持(通过jQuery)。


2
它可以工作,但不是最好的代码。在顶部$(this)应分配一个可在整个代码中使用的变量。调用$使用的每个表达式$(this)都是“不要写这样的jQuery的101”的必经之路。
Sami Samhuri 2011年

20
您必须谨慎使用此代码,因为如果提交表单,则占位符值将作为表单值提交。在提交之前应清除它。
ericbae 2012年

2
@chriscatfr请考虑接受我的回答(stackoverflow.com/a/13281620/114140),因为我认为它将引导SO用户寻求更好的解决方案。
克里斯·雅各布

好奇,因为我不熟悉HTML 5功能之争:是现代化的工具导致这是一个不好的解决方案,还是jquery-html5-placeholder-fix本身(或两者)?
Snekse 2012年

这是简单而优雅的,为我完成了工作。
graumanoz

17

如果要在不使用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中的输入。

请注意,这通过应用该类起作用: usingPlaceHolder应用于输入元素而,因此您可以使用它来设置其样式(例如,添加规则.usingPlaceHolder { color: #999; font-style: italic; }以使其看起来更好)。


1
抱歉-我真的不知道这样做是否容易-我猜您想显示实际的文本值,而不是“符号”。我唯一想到的解决方法是将其切换为文本输入,除非它具有焦点或值,否则将其显示为密码字段。
马克·罗德斯

@StephenPatten看看对带密码字段的占位符的修复。我完全按照Mark的建议去做:)
Chev

8

这是一个更好的解决方案。 http://bavotasan.com/2011/html5-placeholder-jquery-fix/ 我已经采用了它,仅适用于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>

不,因为IE浏览器IE8的工作并没有让jQuery来操纵输入类型(在下午1:48在退房比尔评论于2011年12月20日,bavotasan.com/2011/html5-placeholder-jquery-fix
forste

还假设您正在提交表格。我见过的大多数单页应用程序都不使用表单。只需单击处理程序。
chovy

5

如果要输入描述,可以使用此描述。这适用于IE 9和所有其他浏览器。

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

1
我自己没有测试过,但是如果您点击该字段而不是单击它,则猜测这将无法正常工作。我在许多网站或类似的网站中都看到了该错误。
eselk

使用此解决方案,您还需要在表单提交时检查此值。
IgorJerosimić2014年

我很惊讶这获得了任何票,即使在2012/2013
LocalPCGuy 2015年

如果您碰巧将输入内容写到输入中,则占位符('CV2:')将被删除。
丹尼尔(Daniel)

2

使用mordernizr来检测不支持占位符的浏览器,我创建了此短代码来修复它们。

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

2
您必须谨慎使用此代码,因为如果您提交表单,则占位符值将作为表单值提交。您应该先清除它,然后再提交。
chriscatfr

3
@chriscatfr:在此示例中,如何正确地做到这一点?如果我的占位符是“密码”,而我的密码实际上是“密码”?
Lain 2016年

您可以对此类字段使用“脏”的概念。输入时将字段标记为干净(可能使用data-dirty =“ false”)。如果他们提交表单而不更改占位符文本,您将看到该字段是干净的,请清除它。如果他们确实更改了它,甚至将其更改为与占位符相同的值,那么它很脏,您确实提交了该值。
oooyaya '16

有关密码和其他解决方案的信息,请查看jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel

placeholder属性被标准化为字符串=>实际上不需要Modernizr :::::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }为不支持而测试在IE9模式下仿真-可以。
jave.web '16

2

我知道我迟到了,但是我发现一个解决方案在标签的头部插入:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->


您是否在IE9中对此进行了测试?因为否则IE10 +支持占位符...
jave.web

当然,这很奇怪,IE9本身不支持标签将其打开-那是不是实验功能?这是在某处引用的吗?:)
jave.web '16

1

使它在下面的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(''); });
});
}
});

CSS样式需要包括:

.hasPlaceholder {color: #aaa;}

1
您应该在此处修复格式,例如添加缩进并将答案与代码分开
胆小

1

晚会有点晚了,但是我使用了我尝试过的值得信赖的JS,它利用了Modernizr的优势。可以复制/粘贴并应用于任何项目。每次工作:

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

}

所有这些使用jQuery的解决方案..没有膨胀的jQuery是否没有解决方案?
Spock

0

我通常对http://cdnjs.com/的评价很高,并且列出了它们:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

不确定是谁的代码,但看起来很简单:

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

1
此插件还需要原型库
rosswil

0

我在互联网上搜索,找到了一个简单的jquery代码来处理此问题。在我这边,它已经解决并在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"));
                }
            });
        }
    });

2
您的占位符即成为价值。如果您提交,它们将被发送。使用正确答案的placeholder.js,字段将保持为空
chriscatfr 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.