it-swarm.com.de

Platzhalter in IE9

Es scheint ein sehr bekanntes Problem zu sein, aber alle Lösungen, die ich bei Google gefunden habe, funktionieren auf meinem neu heruntergeladenen IE9 nicht.

Welche Methode bevorzugen Sie, um die Eigenschaft Placeholder für die Tags input und textarea zu aktivieren?

Optional: Ich habe viel Zeit verloren und habe noch nicht nach der Eigenschaft required gesucht. Würdest du dazu auch einen Rat haben? Natürlich kann ich den Wert in PHP überprüfen, aber um dem Benutzer zu helfen, ist diese Eigenschaft sehr praktisch.

139
chriscatfr

HTML5 Placeholder jQuery Plugin
- von Mathias Bynens (ein Mitarbeiter von HTML5 Boilerplate und jsPerf )

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

Demo & Beispiele

http://mathiasbynens.be/demo/placeholder

p.s
Ich habe dieses Plugin schon oft benutzt und es ist ein Vergnügen. Auch es funktioniert nicht Sende den Platzhaltertext als Wert, wenn du dein Formular abschickst (... ein echtes Problem, das ich bei anderen Plugins gefunden habe).

184
Chris Jacob

Ich denke, das ist, wonach Sie suchen: jquery-html5-placeholder-fix

Diese Lösung verwendet die Featureerkennung (über modernizr ), um festzustellen, ob Platzhalter unterstützt werden. Wenn nicht, wird Unterstützung hinzugefügt (über jQuery).

21
matt

Wenn Sie dies ohne Verwendung von jquery oder modenizer tun möchten, können Sie den folgenden Code verwenden:

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

}());

Für jedes Textfeld, für das Sie es verwenden möchten, müssen Sie placeHolder(HTMLInputElement) ausführen, aber ich denke, Sie können dies einfach entsprechend ändern! Wenn Sie dies nicht nur beim Laden, sondern auch auf diese Weise tun, können Sie es für Eingaben verwenden, die sich beim Laden der Seite nicht im DOM befinden.

Beachten Sie, dass dies durch Anwenden der Klasse: usingPlaceHolder auf das Eingabeelement funktioniert. Sie können diese Klasse also verwenden, um sie zu formatieren (fügen Sie beispielsweise die Regel .usingPlaceHolder { color: #999; font-style: italic; } Hinzu, damit sie besser aussieht).

17
Mark Rhodes

Hier ist eine viel bessere Lösung. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Ich habe es ein wenig übernommen, um nur mit Browsern unter IE10 zu arbeiten

<!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>
8

Wenn Sie eine Beschreibung eingeben möchten, können Sie diese verwenden. Dies funktioniert auf IE 9 und allen anderen Browsern.

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

Ich weiß, dass ich spät dran bin, aber ich habe eine Lösung gefunden, bei der das folgende Tag in den Kopf eingefügt wurde:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!--FIX jQuery INTERNET Explorer-->
2
decadenza

Mit mordernizr , um Browser zu erkennen, die keinen Platzhalter unterstützen, habe ich diesen kurzen Code erstellt, um sie zu beheben.

//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
Etienne Dupuis

um es in IE-9 zum Laufen zu bringen, benutze bitte unten. Es funktioniert für mich

JQuery muss enthalten:

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 Style muss enthalten:

.hasPlaceholder {color: #aaa;}
1
Suresh Gupta

Ein bisschen zu spät zur Party, aber ich benutze mein bewährtes JS, das Modernizr ausnutzt. Kann kopiert/eingefügt und auf jedes Projekt angewendet werden. Funktioniert jedes Mal:

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

}
1
egr103

Ich halte normalerweise ziemlich viel von http://cdnjs.com/ und sie listen auf:

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

Ich bin mir nicht sicher, wer der Code ist, aber es sieht einfach aus:

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

Ich suchte im Internet und fand einen einfachen JQuery-Code, um dieses Problem zu lösen. In meiner Seite wurde es gelöst und an zB 9 gearbeitet.

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