一， oschina上
IE不支持HTML5表单属性placeholder的解决办法
(
function
($) {
$.fn.placeholder =
function
(options) {
var
defaults = {
pColor:
"#ccc"
,
pActive:
"#999"
,
pFont:
"14px"
,
activeBorder:
"#080"
,
posL: 8,
zIndex:
"99"
},
opts = $.extend(defaults, options);
//
return
this
.each(
function
() {
if
(
"placeholder"
in
document.createElement(
"input"
))
return
;
$(
this
).parent().css(
"position"
,
"relative"
);
var
isIE = $.browser.msie,
version = $.browser.version;
//不支持placeholder的浏览器
var
$
this
= $(
this
),
msg = $
this
.attr(
"placeholder"
),
iH = $
this
.outerHeight(),
iW = $
this
.outerWidth(),
iX = $
this
.position().left,
iY = $
this
.position().top,
oInput = $(
"<label>"
, {
"class"
:
"test"
,
"text"
: msg,
"css"
: {
"position"
:
"absolute"
,
"left"
: iX +
"px"
,
"top"
: iY +
"px"
,
"width"
: iW - opts.posL +
"px"
,
"padding-left"
: opts.posL +
"px"
,
"height"
: iH +
"px"
,
"line-height"
: iH +
"px"
,
"color"
: opts.pColor,
"font-size"
: opts.pFont,
"z-index"
: opts.zIndex,
"cursor"
:
"text"
}
}).insertBefore($
this
);
//初始状态就有内容
var
value = $
this
.val();
if
(value.length > 0) {
oInput.hide();
};
//
$
this
.on(
"focus"
,
function
() {
var
value = $(
this
).val();
if
(value.length > 0) {
oInput.hide();
}
oInput.css(
"color"
, opts.pActive);
//
if
(isIE && version < 9){
var
myEvent =
"propertychange"
;
}
else
{
var
myEvent =
"input"
;
}
$(
this
).on(myEvent,
function
() {
var
value = $(
this
).val();
if
(value.length == 0) {
oInput.show();
}
else
{
oInput.hide();
}
});
}).on(
"blur"
,
function
() {
var
value = $(
this
).val();
if
(value.length == 0) {
oInput.css(
"color"
, opts.pColor).show();
}
});
//
oInput.on(
"click"
,
function
() {
$
this
.trigger(
"focus"
);
$(
this
).css(
"color"
, opts.pActive)
});
//
$
this
.filter(
":focus"
).trigger(
"focus"
);
});
}
})(jQuery)
调用方法：
//解决IE下不支持placeholder
if
($.browser.msie) {
$(
":input[placeholder]"
).each(
function
(){
$(
this
).placeholder();
});
}
用jQuery解决input中placeholder值在ie中无法支持的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//第一种方法
$(document).ready(function(){
var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text}
input.οnfοcus=function(){
if(input.value===text){this.value=''}};
input.οnblur=function(){if(input.value===''){this.value=text}}};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
if(input.type==='text'&&text){placeholder(input)}}}});
//第二种方法
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 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();
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
</script>
</head><body>
<form>
<label for="name">用户名：</label>
<input type="text" placeholder="请输入用户名"/>
</form>
</body>
</html>
让浏览器兼容placeholder
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>验证Valid ----placeholder</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
span.emptyhint {color:#999;position:absolute;padding:3px;}
</style>
</head>
<body>
<div id=doc3>
<div id="bd" >
<div class="section-ctn">
<ul>
<li>
<label class="k">订单主人：</label>
<input type="text" placeholder="请填写订单主人" value="JK">
</li>
<li>
<label class="k">订单号：</label>
<input type="text" placeholder="请填写订单号">
</li>
<li>
<label class="k">备注：</label>
<textarea type="text" placeholder="请填写备注"></textarea>
</li>
</ul>
</div>
</div>
<div id="ft">
部分内容来自 qwrap wagang组件Valid: (<a href="http://dev.qwrap.com/resource/js/wagang/_index.html">http://dev.qwrap.com/resource/js/wagang/_index.html</a>)
</div>
<div id="ft">
QWrap网址： <a href="http://www.qwrap.com">www.qwrap.com</a>
</div>
</div>
</body>
<script>
function initPlaceHolders(){
if('placeholder' in document.createElement('input')){ //如果浏览器原生支持placeholder
return ;
}
function target (e){
var e=e||window.event;
return e.target||e.srcElement;
};
function _getEmptyHintEl(el){
var hintEl=el.hintEl;
return hintEl && g(hintEl);
};
function blurFn(e){
var el=target(e);
if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下，onfocusin会在div等元素触发
var emptyHintEl=el.__emptyHintEl;
if(emptyHintEl){
//clearTimeout(el.__placeholderTimer||0);
//el.__placeholderTimer=setTimeout(function(){//在360浏览器下，autocomplete会先blur再change
if(el.value) emptyHintEl.style.display='none';
else emptyHintEl.style.display='';
//},600);
}
};
function focusFn(e){
var el=target(e);
if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下，onfocusin会在div等元素触发
var emptyHintEl=el.__emptyHintEl;
if(emptyHintEl){
//clearTimeout(el.__placeholderTimer||0);
emptyHintEl.style.display='none';
}
};
if(document.addEventListener){//ie
document.addEventListener('focus',focusFn, true);
document.addEventListener('blur', blurFn, true);
}
else{
document.attachEvent('onfocusin',focusFn);
document.attachEvent('onfocusout',blurFn);
}
var elss=[document.getElementsByTagName('input'),document.getElementsByTagName('textarea')];
for(var n=0;n<2;n++){
var els=elss[n];
for(var i =0;i<els.length;i++){
var el=els[i];
var placeholder=el.getAttribute('placeholder'),
emptyHintEl=el.__emptyHintEl;
if(placeholder && !emptyHintEl){
emptyHintEl=document.createElement('span');
emptyHintEl.innerHTML=placeholder;
emptyHintEl.className='emptyhint';
emptyHintEl.οnclick=function (el){return function(){try{el.focus();}catch(ex){}}}(el);
if(el.value) emptyHintEl.style.display='none';
el.parentNode.insertBefore(emptyHintEl,el);
el.__emptyHintEl=emptyHintEl;
}
}
}
}
initPlaceHolders();
</script>
</html>
http://www.cnblogs.com/jkisjk/archive/2011/02/23/placdeholder_solo.html
jquery html5 实现placeholder兼容password IE6
上一篇文章中，只处理了 type="text" 输入框，没有处理 type="password" 输入框，这样在 type="password" 输入框中 placeholder="请输入密码" 显示的不是明文 “请输入密码” 而是 黑点符 “.....”。
下面给出解决办法：
大致思路：
1.判断浏览器是否支持html5的placeholder，支持就直接使用该属性。
2.不支持就通过jquery来添加blur focus事件
3.对password框的特使处理
运行前要引入jquery类库，
<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery<br/>
<br/>
账号：<input type="text" name="email" placeholder = '用户账号' /><br/>
<br/>
密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
});
}
</script>
五，
让所有浏览器都支持HTML5 placeholder属性
检测浏览器是否支持placeholder属性
$.support.placeholder = false;
if ("placeholder" in document.createElement("input")) $.support.placeholder = true;
源代码
$(function () {
$.support.placeholder = false;
if ("placeholder" in document.createElement("input")) $.support.placeholder = true;
if (!$.support.placeholder) {
var active = document.activeElement;
$(":text, textarea").live("focus", function () {
if ($(this).attr("placeholder") != "" && $(this).val() == $(this).attr("placeholder")) {
$(this).val("").removeClass("placeholder");
}
}).live("blur", function () {
if ($(this).attr("placeholder") != "" && ($(this).val() == "" || $(this).val() == $(this).attr("placeholder"))) {
$(this).val($(this).attr("placeholder")).addClass("placeholder");
}
});
$(":text, textarea").blur();
$(active).focus();
$("form").submit(function () {
$(this).find(".placeholder").each(function () { $(this).val(""); });
});
}
});
4097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
