Javascript IE9中的占位符
这似乎是一个众所周知的问题,但我在谷歌上找到的所有解决方案在我新下载的IE9上都不起作用 要启用Javascript IE9中的占位符,javascript,html,internet-explorer-9,placeholder,Javascript,Html,Internet Explorer 9,Placeholder,这似乎是一个众所周知的问题,但我在谷歌上找到的所有解决方案在我新下载的IE9上都不起作用 要启用输入和文本区域标记上的占位符属性,您最喜欢哪种方式 可选:我在这方面浪费了很多时间,还没有找到required属性。你对此也有什么建议吗?显然,我可以在PHP中检查该值,但为了帮助用户,该属性非常方便。我认为这就是您要寻找的: 此解决方案使用功能检测(via)来确定是否支持占位符。如果没有,则添加支持(通过jQuery)。如果不想使用jQuery或modenizer,可以使用以下代码: (functi
输入
和文本区域
标记上的占位符
属性,您最喜欢哪种方式
可选:我在这方面浪费了很多时间,还没有找到
required
属性。你对此也有什么建议吗?显然,我可以在PHP中检查该值,但为了帮助用户,该属性非常方便。我认为这就是您要寻找的:
此解决方案使用功能检测(via)来确定是否支持占位符。如果没有,则添加支持(通过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..
};
}());
对于每个要使用它的文本字段,您需要运行占位符(HTMLInputElement)
,但我想您可以根据需要更改它!此外,这样做,而不仅仅是在加载时,意味着您可以使它在加载页面时为DOM中不存在的输入工作
请注意,这是通过将类:
usingPlaceHolder
应用于输入元素来实现的,因此您可以使用它来设置输入元素的样式(例如,添加规则。使用placeholder{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: "/>
这里有一个更好的解决方案。 我已经采用了它,只在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>
//IE的占位符修复
$('.lt-ie10[占位符]).focus(函数(){
var i=$(本);
if(i.val()==i.attr('placeholder')){
i、 val(“”).removeClass('placeholder');
if(i.hasClass('password')){
i、 removeClass(“密码”);
this.type='password';
}
}
}).blur(函数(){
var i=$(本);
if(i.val()=''|i.val()==i.attr('占位符')){
if(this.type=='password'){
i、 addClass(“密码”);
this.type='text';
}
i、 addClass(‘占位符’).val(i.attr(‘占位符’);
}
}).blur().parents('form').submit(函数()){
//if($(this).validationEngine('validate')){//if使用validationEngine
$(this.find(“[占位符]”).each(函数(){
var i=$(本);
if(i.val()==i.attr('placeholder'))
i、 val(“”);
i、 removeClass(“占位符”);
})
//}
});
...
HTML5占位符jQuery插件-由(和上的合作者) 演示和示例 p.s
我已经使用这个插件很多次了,它的效果非常好。另外,当您提交表单时,它不会将占位符文本作为值提交(…我发现这是其他插件的一大难题)。我通常认为占位符文本很重要,它们列出了: 不确定这是谁的代码,但看起来很简单:
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(''); });
});
}
});
.hasPlaceholder {color: #aaa;}
CSS样式需要包括:
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(''); });
});
}
});
.hasPlaceholder {color: #aaa;}
我在互联网上搜索,找到了一个简单的jquery代码来处理这个问题。在我这边,它被解决了,并在ie 9上工作
$("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'));
})
}
我知道我迟到了,但我找到了一个解决方案,在头部插入标签:
四年后我又回到了HTML。这意味着我愿意接受任何建议,更换我过时的工具。我几乎从零开始重新启动。我一直在尝试使用JQuery和许多google结果的复制/过去,我的It工作正常,但它不是最好的代码。在顶部,$(此)
应分配给可在整个代码中使用的变量。为每个使用$(this)
的表达式调用$
是“不要像这样编写jQuery 101”的直接产物。您必须小心使用此代码,因为如果提交表单,占位符值将作为表单值提交。在提交之前应该清除它。好奇,因为我是html5特性之战的新手:是现代化者导致了这是一个糟糕的解决方案,还是jquery-html5-placeholder-fix本身(或两者兼而有之)?更新的链接修复了上述注释中的问题。注释要求具有HTML输入功能的现代化脚本在IE8上不起作用,因为IE不允许jQuery操作输入类型(2011年12月20日下午1:48查看Bill的注释)也假定您提交了表单。我见过的大多数单页应用程序都不使用表单。只需单击处理程序。我们正在使用自定义CRM。我按预期添加了这段代码和作品,但他们通过javascript提交表单。提交按钮有onclick=“\u IW.FormsRuntime.submit(this.form);”
。我是否可以更改此onclick事件,首先清除占位符,然后运行onclick中存在的CRM代码?我将github js文件复制到我的src代码中。仍然不能使用占位符。这确实是一种享受,但是在单页应用程序中使用它是一种痛苦。对于动态添加的字段,您需要手动触发它。除此之外,它工作得很好!谢谢,整洁的插件,但是我有一个问题是ie9当文本输入聚焦时占位符消失了。这与HTML5 behaviorIt不同,它可以很好地处理一个大的'but',$('input')。当输入为空时,val()返回占位符值。因为我使用的是AJAX框架,占位符被发送到服务器上……这个插件需要原型库,我自己也不测试它,但是如果你点击这个字段而不是点击它,猜测这不会很好。