占位符在 IE10 中不起作用
Posted
技术标签:
【中文标题】占位符在 IE10 中不起作用【英文标题】:Placeholder not working in IE10 【发布时间】:2013-10-19 04:12:40 【问题描述】: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 中发生。
【问题讨论】:
第二点是 IE-10 删除文本框所有内容的特性 问题不在标记中。您可能有一些脚本会破坏 IE 10 中的占位符。您应该将其添加到问题中。 【参考方案1】:听起来您的 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/
【讨论】:
感谢 Mathias Bynens 插件,它在加载有条件的 IE cmets 时效果很好。将js和.placeholder()
代码包裹在<!--[if lte IE 10]>
中【参考方案2】:
我不确定 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');
【讨论】:
k 只需在函数中调用这两行并在页面加载后调用该函数..应该可以工作.. 我检查了您的第一个解决方案(因为代码较少),即 8 和 9,它对我不起作用,除此之外我是否需要添加任何脚本。 我添加的两种解决方案都是控制输入字段占位符的编码方式,将其放置在脚本部分应该可以工作..仍然需要任何帮助,您可以恢复...【参考方案3】:试试这个,浏览器中占位符的 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();
);
希望这会有所帮助!
【讨论】:
在您投反对票时发表评论会很高兴,以便其他人可以理解投反对票。否则,我不知道这条评论有什么问题。以上是关于占位符在 IE10 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章