如何在 IE8和9中支持占位符属性

我有一个小问题，输入框的 placeholder属性在 IE8-9中不受支持。

在我的项目(ASPNet)中，什么是获得这种支持的最佳方法? 我使用的是 jQuery。 我需要使用一些其他的外部工具吗？

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html是一个好的解决方案吗？

239994 次浏览
小开
最佳答案

你可以使用这个 jQuery 插件: https://github.com/mathiasbynens/jquery-placeholder

但你的链接似乎也是一个很好的解决方案。

小开

如果你使用 jquery，你可以这样做。从这个网站 带有 Jquery 的占位符

$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

这些是备用链接

  1. 占位符 jquery 库
  2. HTML5填充 ——选择占位符部分
小开

你可以使用以下任何一种填充物:

这些脚本将在不支持 placeholder属性的浏览器中添加对 placeholder属性的支持，而且它们不需要 jQuery！

小开

我用这个，这只是 Javascript。

我只有一个带有值的 input 元素，当用户单击 input 元素时，它将其更改为一个没有值的 input 元素。

您可以使用 CSS 轻松地更改文本的颜色。占位符的颜色是 id # IEinput 中的颜色，键入的文本的颜色是 id # email 中的颜色。不要使用 getElementsByClassName，因为不支持占位符的 IE 版本也不支持 getElementsByClassName！

通过将原始密码输入类型设置为文本，可以在密码输入中使用占位符。

修补匠: http://Tinker.io/4f7c5/1 JSfiddle 服务器瘫痪了！

抱歉我英语不好 *

JAVASCRIPT (JAVASCRIPT)

function removeValue() {
document.getElementById('mailcontainer')
.innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
document.getElementById('email').focus(); }

超文本标示语言

<span id="mailcontainer">
<input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
小开 
$(function(){
if($.browser.msie && $.browser.version <= 9){
$("[placeholder]").focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
}).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
}).blur();


$("[placeholder]").parents("form").submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});

试试这个

小开 
    <script>
if ($.browser.msie) {
$('input[placeholder]').each(function() {


var input = $(this);


$(input).val(input.attr('placeholder'));


$(input).focus(function() {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});


$(input).blur(function() {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
;
</script>
小开

$浏览器已经不在最新的 JQuery 上了..。 您必须使用 < strong > $. support

如下:

 <script>


(function ($) {
$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);




//fix for IE7 and IE8
$(function () {
if (!$.support.placeholder) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();


$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
});
});
}
});
</script>
小开

由于大多数解决方案都使用 jQuery，或者并不像我希望的那样令人满意，所以我为 mootools 编写了一个代码片段。

function fix_placeholder(container){
if(container == null) container = document.body;


if(!('placeholder' in document.createElement('input'))){


var inputs = container.getElements('input');
Array.each(inputs, function(input){


var type = input.get('type');


if(type == 'text' || type == 'password'){


var placeholder = input.get('placeholder');
input.set('value', placeholder);
input.addClass('__placeholder');


if(!input.hasEvent('focus', placeholder_focus)){
input.addEvent('focus', placeholder_focus);
}


if(!input.hasEvent('blur', placeholder_blur)){
input.addEvent('blur', placeholder_blur);
}


}


});


}
}


function placeholder_focus(){


var input = $(this);


if(input.get('class').contains('__placeholder') || input.get('value') == ''){
input.removeClass('__placeholder');
input.set('value', '');
}


}


function placeholder_blur(){


var input = $(this);


if(input.get('value') == ''){
input.addClass('__placeholder');
input.set('value', input.get('placeholder'));
}


}

我承认它看起来比其他的更多一点，但是它工作的很好。 _ _ placeholder 是一个 ccs-class，用于使占位符文本的颜色更花哨。

我使用 AddEvent (‘ domready’，..。中的 Fix _ 占位符和任何额外添加的代码，如弹出窗口。

希望你喜欢。

问候你。

小开

我用了这个链接的代码 Http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

但在浏览器检测中，我使用了:

if (navigator.userAgent.indexOf('MSIE') > -1) {
//Your placeholder support code here...
}
小开

我有几个插件的兼容性问题，我尝试，这似乎是最简单的方式来支持占位符的文本输入:

function placeholders(){
//On Focus
$(":text").focus(function(){
//Check to see if the user has modified the input, if not then remove the placeholder text
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
}
});


//On Blur
$(":text").blur(function(){
//Check to see if the use has modified the input, if not then populate the placeholder back into the input
if( $(this).val() == ""){
$(this).val($(this).attr("placeholder"));
}
});
}
小开 
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
小开

添加以下代码即可完成。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
<script type="text/javascript">
// Mock client code for testing purpose
$(function(){
// Client should be able to add another change event to the textfield
$("input[name='input1']").blur(function(){ alert("Custom event triggered."); });
// Client should be able to set the field's styles, without affecting place holder
$("textarea[name='input4']").css("color", "red");


// Initialize placeholder
$.Placeholder.init();


// or try initialize with parameter
//$.Placeholder.init({ color : 'rgb(255, 255, 0)' });


// call this before form submit if you are submitting by JS
//$.Placeholder.cleanBeforeSubmit();
});
</script>

从 https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip下载完整的代码和演示

小开

下面是一个 javascript 函数，它可以为 IE8及以下版本创建占位符，也可以为密码创建占位符:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {
for (var e = 0; e < document.fm.elements.length; e++) {
if (fm.elements[e].placeholder != undefined &&
document.createElement("input").placeholder == undefined) { // IE 8 and below
fm.elements[e].style.background = "transparent";
var el = document.createElement("span");
el.innerHTML = fm.elements[e].placeholder;
el.style.position = "absolute";
el.style.padding = "2px;";
el.style.zIndex = "-1";
el.style.color = "#999999";
fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
fm.elements[e].onfocus = function() {
this.style.background = "yellow";
}
fm.elements[e].onblur = function() {
if (this.value == "") this.style.background = "transparent";
else this.style.background = "white";
}
}
}
}


add_placeholders(document.getElementById('fm'))
<form id="fm">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<textarea name="description" placeholder="Description"></textarea>
</form>

小开

对于其他在这里登陆的人来说，这就是对我起作用的:

//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();


$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

把这个添加到 script.js 文件中。 感谢 href = “ http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html”rel = “ nofollow norefrer”> http://www.hagenburger.net/blog/html5-input-placeholder-fix-with-jquery.html


提交答案