javascript - Platzhalter funktioniert nicht in IE10



html css (2)

Ich bin mir nicht sicher über das Attribut placeHolder für die Eingabeunterstützung in ie10, aber wenn Sie einen Platzhalter in i wollen, können Sie dies durch jquery wie folgt tun.

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    var placeholderText = 'Some Placeholder Text';
    $('#loginname').val(placeholderText);
    $('#loginname').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });
    $('#loginname').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

Du kannst dasselbe auch für das Passwort tun ..

Hab das mal so mit Code versucht ... glaube ich sollte funktionieren ...

$('#loginname').attr('placeholder', 'username');
$('#password').attr('placeholder', 'password');

html:

<div class="div-input">
    <input type="text" id="loginname" name="username" value="" maxlength="25" 
        class="form-input" placeholder="Username"
    />
</div>
<div class="div-input">
    <input type="password" id="loginpassword" name="password" maxlength="25" 
        class="form-input" placeholder="Password"
    />
</div>
<div>
    <input type="submit" name="login" value="LOGIN" class="form-button" 
        onclick="return check_login(&quot;/&quot;)" 
    />
    <span id="logInfo"></span><span style="display: none;" id="overlay"></span>
    <span style="display: none;" id="popup">
        <img src="/public/images/loading.gif" />
    </span>
</div>

Mein Problem ist, dass der Platzhalter in allen Browsern funktioniert, für IE8 und IE9 habe ich Javascript verwendet, um es zu lösen, aber in IE10 funktioniert der Platzhalter, aber nicht auf korrekte Weise.

  1. Was passiert ist, dass beim Laden der Seite, wenn Placeholder der Platzhalter ist, ich nur Placeholde als Platzhalter in IE10 bekomme (der letzte Buchstabe verschwindet), aber wenn ich in das Eingabefeld Placeholder und außerhalb der Seite, wird der richtige Platzhalter als Platzhalter Placeholder .

  2. Wenn ich ein beliebiges Wort in das Eingabefeld eintippe, bekomme ich ein Kreuzsymbol (Symbol schließen) an der Ecke im Eingabefeld, was nur in IE10 passiert.


Probieren Sie dies aus, ist jquery pluin für Platzhalter im Browser, die es nicht perfekt unterstützen. Lassen Sie Ihren PHP-Code und fügen Sie diese js sollte es funktionieren:

(function($) {

/**
 * Spoofs placeholders in browsers that don't support them (eg Firefox 3)
 * 
 * Copyright 2011 Dan Bentley
 * Licensed under the Apache License 2.0
 *
 * Author: Dan Bentley [github.com/danbentley]
 */

// Return if native support is available.
if ("placeholder" in document.createElement("input")) return;

$(document).ready(function(){
    $(':input[placeholder]').not(':password').each(function() {
        setupPlaceholder($(this));
    });

    $(':password[placeholder]').each(function() {
        setupPasswords($(this));
    });

    $('form').submit(function(e) {
        clearPlaceholdersBeforeSubmit($(this));
    });
});

function setupPlaceholder(input) {

    var placeholderText = input.attr('placeholder');

    setPlaceholderOrFlagChanged(input, placeholderText);
    input.focus(function(e) {
        if (input.data('changed') === true) return;
        if (input.val() === placeholderText) input.val('');
    }).blur(function(e) {
        if (input.val() === '') input.val(placeholderText); 
    }).change(function(e) {
        input.data('changed', input.val() !== '');
    });
}

function setPlaceholderOrFlagChanged(input, text) {
    (input.val() === '') ? input.val(text) : input.data('changed', true);
}

function setupPasswords(input) {
    var passwordPlaceholder = createPasswordPlaceholder(input);
    input.after(passwordPlaceholder);

    (input.val() === '') ? input.hide() : passwordPlaceholder.hide();

    $(input).blur(function(e) {
        if (input.val() !== '') return;
        input.hide();
        passwordPlaceholder.show();
    });

    $(passwordPlaceholder).focus(function(e) {
        input.show().focus();
        passwordPlaceholder.hide();
    });
}

function createPasswordPlaceholder(input) {
    return $('<input>').attr({
        placeholder: input.attr('placeholder'),
        value: input.attr('placeholder'),
        id: input.attr('id'),
        readonly: true
    }).addClass(input.attr('class'));
}

function clearPlaceholdersBeforeSubmit(form) {
    form.find(':input[placeholder]').each(function() {
        if ($(this).data('changed') === true) return;
        if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
    });
}
})(jQuery);

Dann musst du das Plugin in deiner PHP-Seite oder in einer anderen js aufrufen, indem du einfach:

 $(function() {
    // Invoke the plugin
    $('input, textarea').placeholder();       
   });

Hoffe das hilft!





internet-explorer-8