IE浏览器中的占位符文本问题(8-9)
Posted
技术标签:
【中文标题】IE浏览器中的占位符文本问题(8-9)【英文标题】:Placeholder text issue in IE browsers(8-9) 【发布时间】:2013-11-25 22:49:26 【问题描述】:我正在处理表单(输入字段)验证。
问题 - IE 浏览器 (8-9) 将占位符文本视为值,并且在验证期间它接受相同的值,但应将其视为空值。我不想使用任何脚本并实现它,我想出了以下功能。任何人都可以稍微提高功能的可用性/范围。目前,每次用户输入值时,它都会使输入字段为空白。但是,我希望它在占位符默认文本生效时首次验证。有什么建议吗?
HTML
<input type="text" name="memberid" id="memberid" placeholder="Some Value" />
<a href="#" class="alpha-btn" id="search-btn">Search</a>
jQuery
$('#search-btn').on('click', function()
if($.browser.msie)
$('input').each(function()
var theAttribute = $(this).attr('placeholder');
if (theAttribute)
$(this).val('');
alert('Please enter value - IE');
);
);
【问题讨论】:
伙计,我不想为此使用任何脚本。如果您有任何解决方案,除了...请 老兄,您已经正在为此使用脚本。您发布的代码是一个脚本。我链接到的第三方代码与您的代码完全相同,但没有错误。 :-) 这多有趣.. 不是提供解决方案,而是指出愚蠢的事情.. 我的意思是我不希望在我的代码中添加任何第三方脚本.. 想要使用我的功能实现它..如果你能增强..它会有所帮助..否则非常感谢你的时间。 【参考方案1】:placeholder
在< IE 9
中产生问题,因此您可以像使用data() 一样
HTML
<input type="text" name="memberid" id="memberid" data-placeholder="Some Value" placeholder="Some Value"/>
脚本
$('#search-btn').on('click', function()
if($.browser.msie)
$('input').each(function()
var theAttribute = $(this).data('placeholder');
if (theAttribute == this.value) // check placeholder and value
$(this).val('');
alert('Please enter value - IE');
);
);
【讨论】:
#Roshan 谢谢。这工作正常。问题,当用户在这种情况下输入默认占位符文本作为值(即“某些值”)时,它会失败..任何解决方案? #Bug 在这种情况下是fails
而不是 valid too
【参考方案2】:
我认为实现您想要做的最好的方法是为 IE8 和 IE9 中的占位符构建一个完整的解决方案。为此,我建议使用Modernizr 和输入占位符功能 检测。所以,你可以使用这样的函数:
window.ie8ie9placeholders = function()
if (!Modernizr.input.placeholder)
return $("input").each(function(index, element)
if ($(element).val() === "" && $(element).attr("placeholder") !== "")
$(element).val($(element).attr("placeholder"));
$(element).focus(function()
if ($(element).val() === $(element).attr("placeholder"))
return $(element).val("");
);
return $(element).blur(function()
if ($(element).val() === "")
return $(element).val($(element).attr("placeholder"));
);
);
;
这将为 IE8 和 IE9 启用占位符。您需要做的就是在初始化代码时使用它。
ie8ie9placeholders();
【讨论】:
以上是关于IE浏览器中的占位符文本问题(8-9)的主要内容,如果未能解决你的问题,请参考以下文章
在 Edge 浏览器上,如何使用 CSS 更改输入占位符文本颜色?