佔位符在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輸入支持佔位符屬性，但是如果想要可佔位符，即U可以做到這一點通過量的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; 
    }); 
} 

ü可以做同樣的密碼太..

具有u試圖有點像這樣使用代碼...我認爲應該工作...

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

Answer 2

ŧ RY這個，是在瀏覽器的佔位符不完全支持它的jQuery pluin。離開你的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]--> 

另外，還有由馬蒂亞斯Bynens一個非常不錯的jQuery插件，是免費提供的，並處理所有這一切爲您：https://github.com/mathiasbynens/jquery-placeholder

一些的CMS已經使用此代碼建立了一個插件。 Wordpress插件在這裏：http://wordpress.org/plugins/html5-placeholder-polyfill/