Заполнитель не работает в IE10

Question

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> 

Моя проблема заключается в том, что заполнитель работает отлично во всех браузерах, для IE8 и IE9 я использовал Javascript, чтобы решить эту проблему, но в IE10 заполнитель работает, но не в правильном порядке.

1. Что происходит, что при загрузке страницы, если Placeholder является заполнителем, я получаю только Placeholde в качестве заполнителя в IE10 (последняя буква исчезает), но если я нажимаю на поле ввода и вне страницы он показывает правильный заполнитель как Placeholder.

2. Если я ввожу слово в поле ввода, я получаю символ пересечения (символ закрытия) в углу поля ввода, которое происходит только в IE10.

Answer 1

я не уверен, что атрибут заполнителя для ввода поддержки в IE10, но если и хочет местозаполнитель то есть и может сделать это через в JQuery, как это ниже ..

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

и может делать то же самое пароля тоже ..

Have U попытался несколько, как это с помощью кода ... я считаю, должны работать ...

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

Answer 2

T ry это, jquery pluin для placeholder в браузере, который не поддерживает его отлично. Оставив свой код PHP и добавить этот JS, он должен работать:

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

Затем вы должны вызвать плагин на странице PHP или в другом JS просто:

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

Надеется, что это помогает!

Answer 3

Звучит так, как будто ваш javascript ломает встроенную функциональность IE10.

Чтобы проверить это и, надеюсь, исправить, оберните javascript, который вы написали для заполнителей в условном выражении, чтобы он применим только к IE9 и ниже.

<!--[if lt IE 9]> 
<script> 
    document.createElement('header'); 
    document.createElement('nav'); 
</script> 
<![endif]--> 

С другой стороны, есть очень хороший плагин JQuery Матиас Bynens, который доступен бесплатно и обрабатывает все это для вас: https://github.com/mathiasbynens/jquery-placeholder

Некоторые CMSs уже есть плагин, построенный с помощью этого кода. Плагин Wordpress находится здесь: http://wordpress.org/plugins/html5-placeholder-polyfill/