IE9中的占位符 - 开卷题库

小开

这个解决方案使用特征提取(通过现代化)来确定是否支持占位符，如果不支持，则添加支持(通过 jQuery)。

小开

如果你不想使用 jquery 或者 modenizer，你可以使用下面的代码:

(function(){


"use strict";


//shim for String's trim function..
function trim(string){
return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
}


//returns whether the given element has the given class name..
function hasClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return false;
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
return regex.test(element.className);
}


function removeClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return;
element.className = elClassName.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
}


function addClassName(element, className){
var elClassName = element.className;
if(elClassName)
element.className += " " + className;
else
element.className = className;
}


//strings to make event attachment x-browser..
var addEvent = document.addEventListener ?
'addEventListener' : 'attachEvent';
var eventPrefix = document.addEventListener ? '' : 'on';


//the class which is added when the placeholder is being used..
var placeHolderClassName = 'usingPlaceHolder';


//allows the given textField to use it's placeholder attribute
//as if it's functionality is supported natively..
window.placeHolder = function(textField){


//don't do anything if you get it for free..
if('placeholder' in document.createElement('input'))
return;


//don't do anything if the place holder attribute is not
//defined or is blank..
var placeHolder = textField.getAttribute('placeholder');
if(!placeHolder)
return;


//if it's just the empty string do nothing..
placeHolder = trim(placeHolder);
if(placeHolder === '')
return;


//called on blur - sets the value to the place holder if it's empty..
var onBlur = function(){
if(textField.value !== '') //a space is a valid input..
return;
textField.value = placeHolder;
addClassName(textField, placeHolderClassName);
};


//the blur event..
textField[addEvent](eventPrefix + 'blur', onBlur, false);


//the focus event - removes the place holder if required..
textField[addEvent](eventPrefix + 'focus', function(){
if(hasClassName(textField, placeHolderClassName)){
removeClassName(textField, placeHolderClassName);
textField.value = "";
}
}, false);


//the submit event on the form to which it's associated - if the
//placeholder is attached set the value to be empty..
var form = textField.form;
if(form){
form[addEvent](eventPrefix + 'submit', function(){
if(hasClassName(textField, placeHolderClassName))
textField.value = '';
}, false);
}


onBlur(); //call the onBlur to set it initially..
};


}());

对于每个文本字段，您想使用它，因为您需要运行 placeHolder(HTMLInputElement)，但我想您可以改变它以适应！另外，这样做而不仅仅是在加载时这样做意味着您可以让它为那些在页面加载时不在 DOM 中的输入工作。

注意，这是通过将 class: usingPlaceHolder应用到 input 元素来实现的，因此您可以使用它来设计它(例如，添加规则 .usingPlaceHolder { color: #999; font-style: italic; }来使它看起来更好)。

小开

如果要输入描述，可以使用。这可以在 IE9和其他浏览器上运行。

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>

小开

这里有一个更好的解决方案。 Http://bavotasan.com/2011/html5-placeholder-jquery-fix/ 我已经采用了它一点，只与浏览器在 IE10下工作

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->


<script>
// Placeholder fix for IE
$('.lt-ie10 [placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
//if($(this).validationEngine('validate')) { // If using validationEngine
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
i.removeClass('placeholder');


})
//}
});
</script>
...
</html>

小开

最佳答案

HTML5占位符 jQuery 插件
- 由 Mathias Bynens(HTML5样板文件和 JsPerf的合作者)

Https://github.com/mathiasbynens/jquery-placeholder

示范及例子

Http://mathiasbynens.be/demo/placeholder

附言
我已经使用这个插件很多次，它的工作原理。当你提交你的表单时，它也提交占位符文本作为一个值(... 我发现其他插件真的很痛苦)。

小开

我通常对 http://cdnjs.com/评价很高，他们列出了:

Cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

不确定这是谁的代码，但看起来很简单:

document.observe('dom:loaded', function(){
var _test = document.createElement('input');
if( ! ('placeholder' in _test) ){
//we are in the presence of a less-capable browser
$$('*[placeholder]').each(function(elm){
if($F(elm) == ''){
var originalColor = elm.getStyle('color');
var hint = elm.readAttribute('placeholder');
elm.setStyle('color:gray').setValue(hint);
elm.observe('focus',function(evt){
if($F(this) == hint){
this.clear().setStyle({color: originalColor});
}
});
elm.observe('blur', function(evt){
if($F(this) == ''){
this.setValue(hint).setStyle('color:gray');
}
});
}
}).first().up('form').observe('submit', function(evt){
evt.stop();
this.select('*[placeholder]').each(function(elm){
if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
});
this.submit();
});
}
});

小开

使它在 IE-9下面的使用工作。它为我工作

JQuery 需要包括:

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


if(!$.support.placeholder) {


var active = document.activeElement;


$(':text, textarea, :password').focus(function () {


if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});


$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

CSS 样式需要包括:

.hasPlaceholder {color: #aaa;}

小开

我在互联网上搜索并找到了一个简单的 jquery 代码来处理这个问题。在我这边，问题已经解决了。

$("input[placeholder]").each(function () {
var $this = $(this);
if($this.val() == ""){
$this.val($this.attr("placeholder")).focus(function(){
if($this.val() == $this.attr("placeholder")) {
$this.val("");
}
}).blur(function(){
if($this.val() == "") {
$this.val($this.attr("placeholder"));
}
});
}
});

小开

有点晚了，但我使用我的尝试和信任的 JS，利用现代化的优势。可以复制/粘贴并应用于任何项目。每次都管用:

// Placeholder fallback
if(!Modernizr.input.placeholder){


$('[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('');
}
})
});


}

小开

使用现代化检测不支持占位符的浏览器，我创建了这个简短的代码来修复它们。

//If placeholder is not supported
if (!Modernizr.input.placeholder){


//Loops on inputs and place the placeholder attribute
//in the textbox.
$("input[type=text]").each( function() {
$(this).val($(this).attr('placeholder'));
})
}

小开

我知道我迟到了，但我找到了一个解决办法，把标签插入头部:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->