[英]Placeholder not working in IE10
的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("/")"
/>
<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中,占位符正在運行,但工作方式不正確。
發生的結果是,在頁面加載時,如果Placeholder
是占位符,則在IE10中我只能得到Placeholde
作為占位符(最后一個字母消失),但是如果我單擊輸入框,並且在頁面外部,它將顯示正確的占位符作為Placeholder
。
如果在輸入字段中輸入任何單詞,則輸入字段的角落會出現一個十字符號(關閉符號),僅在IE10中會發生這種情況。
聽起來您的JavaScript破壞了本機IE10占位符功能。
要對此進行測試並希望對其進行修復,請將您為占位符編寫的javascript封裝在條件語句中,以使其僅適用於IE9及以下版本。
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
另外,還有一個由Mathias Bynens提供的非常不錯的jquery插件,可以免費使用,並為您處理所有這些操作: https : //github.com/mathiasbynens/jquery-placeholder
一些CMS已使用此代碼構建了一個插件。 Wordpress插件在這里: http : //wordpress.org/plugins/html5-placeholder-polyfill/
我不確定在ie10中是否支持輸入支持的placeHolder屬性,但是如果您要在ie中使用占位符,則可以像下面這樣通過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;
});
}
您也可以為密碼做同樣的事情。
您是否使用代碼嘗試過這種方式...我認為應該可以...
$('#loginname').attr('placeholder', 'username');
$('#password').attr('placeholder', 'password');
嘗試此操作,是瀏覽器中的jquery插件不完全支持占位符。 留下您的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();
});
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.