web-dev-qa-db-de.com

Einfache Möglichkeit, zu prüfen, ob Platzhalter unterstützt werden?

Ich möchte das HTML5"placeholder"-Attribut in meinem Code verwenden, wenn der Browser des Benutzers dies unterstützt. Andernfalls drucken Sie einfach den Feldnamen auf das Formular. Ich möchte jedoch nur prüfen, ob Platzhalter unterstützt werden und nicht, welche Version/Name des Browsers der Benutzer verwendet.

Idealerweise würde ich so etwas gerne machen

    <body>

     <script>

           if (placeholderIsNotSupported) {
             <b>Username</b>;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>

Außer ich bin nicht sicher, ob das Javascript-Bit. Hilfe wird geschätzt!

52
function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

Ich habe eine jQuery-ized-Version als Ausgangspunkt verwendet. (Nur Kredit geben, wo es fällig ist.)

79
Trott

Oder nur:

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}
35
Nikita Gavrilov

Eine andere Möglichkeit, ohne ein Eingabeelement im Speicher zu erstellen, das GC'd sein muss:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
7
probablyup

Wenn Sie Modernizr verwenden, können Sie folgende Schritte ausführen:

if(!Modernizr.input.placeholder){
  ...
}
6
beenhero

http://html5tutorial.info/html5-placeholder.php hat den Code dafür.

Wenn Sie bereits jQuery verwenden, müssen Sie dies jedoch nicht wirklich tun. Es gibt Platzhalter-Plugins ( http://plugins.jquery.com/plugin-tags/placeholder ), die das HTML5-Attribut verwenden, sofern möglich, und Javascript, um es zu simulieren, falls dies nicht der Fall ist.

3
mikel

Ich versuche das Gleiche zu tun ... hier habe ich das geschrieben

if(!('placeholder'in document.createElement("input"))){
   //... document.getElementById("element"). <-- rest of the code
}}

Damit sollten Sie eine ID haben, um das Element mit dem Platzhalter zu identifizieren ... Ich weiß nicht, ob dies auch Ihnen hilft, das Element NUR zu identifizieren, wenn der Platzhalter nicht unterstützt wird.

2
Andrea Tamago

Ein bisschen spät für die Party, aber wenn Sie jQuery oder AngularJS verwenden, können Sie die oben vorgeschlagene Methode vereinfachen, ohne Plugins zu verwenden.

jQuery

typeof $('<input>')[0].placeholder == 'string'

AngularJS

typeof angular.element('<input>')[0].placeholder == 'string'

Die Überprüfungen sind sehr ähnlich, da AngularJS jQlite unter der Haube läuft.

0
Boaz

Hallo, das ist eine alte Frage, aber hoffentlich hilft das jemandem. 

Dieses Skript überprüft die Kompatibilität von Platzhaltern in Ihrem Browser. Wenn es nicht kompatibel ist, werden alle Eingabefelder mit einem Platzhalter anstelle des Felds value = "" verwendet. Wenn Sie das Formular absenden, wird auch Ihre Eingabe wieder in "" geändert, wenn nichts eingegeben wurde.

// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
   $('[placeholder]').load(function(){
        var input = $(this);
        if (input.val() == '')
        {
            input.addClass('placeholder');
            input.val(input.attr('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().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}
0
Josh