跨浏览器placehoder

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>跨浏览器placehoder</title>

<meta name="author" content="ifrans.cn" />

<meta name="description" content="跨浏览器的placehoder原生js版,让ie也支持placehoder" />

<meta name="keywords" content="跨浏览器,placehoder,ie,原生js,表单" />

<style>

input{ vertical-align:middle; margin-left:10px; line-height:24px; width:200px; padding-left:2px; }

textarea{ vertical-align:middle; margin-left:10px; width:200px; height:50px; font:inherit; padding-left:2px;}

.wrap-statistics{ visibility:hidden;}

</style>

</head>

<body>

<form id="form1">

<h3>在不支持placeholder的浏览器下,通过插入悬浮的span元素方式模拟</h3>

<p><label for="username1">用户名:</label><input type="text" name="username1" id="username1" placeholder="请输入用户名" value="" required></p>

<p><label for="password1">密 码:</label><input type="password" name="password1" id="password1" placeholder="请输入密码" value="" required></p>

<p><label for="address1">地 址:</label><input type="text" name="address1" id="address1" placeholder="请输入地址" value="" required></p>

<p><label for="remarks1">备 注:</label><textarea placeholder="请输入备注" id="remarks1"></textarea></p>

</form>

<form id="form2">

<h3>通过value方式模拟placeholder</h3>

<p><label for="username2">用户名:</label><input type="text" name="username1" id="username2" placeholder="请输入用户名" value="" required></p>

<p><label for="address2">地 址:</label><input type="text" name="address1" id="address2" placeholder="请输入地址" value="" required></p>

<p><label for="remarks2">备 注:</label><textarea placeholder="请输入备注" id="remarks2"></textarea></p>

</form>

<script>

var oForm1 = document.getElementById(‘form1‘);

var oForm1Inputs = oForm1.getElementsByTagName(‘input‘);

for(var i=0;i<oForm1Inputs.length;i++){

placeHolder(oForm1Inputs[i],true);

}

var oForm1Textarea = oForm1.getElementsByTagName(‘textarea‘)[0];

placeHolder(oForm1Textarea,true);

var oForm2 = document.getElementById(‘form2‘);

var oForm2Inputs = oForm2.getElementsByTagName(‘input‘);

for(var i=0;i<oForm2Inputs.length;i++){

placeHolder(oForm2Inputs[i]);

}

var oForm2Textarea = oForm2.getElementsByTagName(‘textarea‘)[0];

placeHolder(oForm2Textarea);

/**

*
@name placeHolder

*
@class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器,通过value或插入span元素两种方案模拟

*
@param {Object} obj 要应用placeHolder的表单元素对象

*
@param {Boolean} span 是否采用悬浮的span元素方式来模拟placeHolder,默认值false,默认使用value方式模拟

*/

function placeHolder(obj, span) {

if (!obj.getAttribute(‘placeholder‘)) return;

var imitateMode = span===true?true:false;

var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘);

if (!supportPlaceholder) {

var defaultValue = obj.getAttribute(‘placeholder‘);

if (!imitateMode) {

obj.onfocus = function () {

(obj.value == defaultValue) && (obj.value = ‘‘);

obj.style.color = ‘‘;

}

obj.onblur = function () {

if (obj.value == defaultValue) {

obj.style.color = ‘‘;

} else if (obj.value == ‘‘) {

obj.value = defaultValue;

obj.style.color = ‘#ACA899‘;

}

}

obj.onblur();

} else {

var placeHolderCont = document.createTextNode(defaultValue);

var oWrapper = document.createElement(‘span‘);

oWrapper.style.cssText = ‘position:absolute; color:#ACA899; display:inline-block; overflow:hidden;‘;

oWrapper.className = ‘wrap-placeholder‘;

oWrapper.style.fontFamily = getStyle(obj, ‘fontFamily‘);

oWrapper.style.fontSize = getStyle(obj, ‘fontSize‘);

oWrapper.style.marginLeft = parseInt(getStyle(obj, ‘marginLeft‘)) ? parseInt(getStyle(obj, ‘marginLeft‘)) + 3 + ‘px‘ : 3 + ‘px‘;

oWrapper.style.marginTop = parseInt(getStyle(obj, ‘marginTop‘)) ? getStyle(obj, ‘marginTop‘): 1 + ‘px‘;

oWrapper.style.paddingLeft = getStyle(obj, ‘paddingLeft‘);

oWrapper.style.width = obj.offsetWidth - parseInt(getStyle(obj, ‘marginLeft‘)) + ‘px‘;

oWrapper.style.height = obj.offsetHeight + ‘px‘;

oWrapper.style.lineHeight = obj.nodeName.toLowerCase()==‘textarea‘? ‘‘:obj.offsetHeight + ‘px‘;

oWrapper.appendChild(placeHolderCont);

obj.parentNode.insertBefore(oWrapper, obj);

oWrapper.onclick = function () {

obj.focus();

}

//绑定input或onpropertychange事件

if (typeof(obj.oninput)==‘object‘) {

obj.addEventListener("input", changeHandler, false);

} else {

obj.onpropertychange = changeHandler;

}

function changeHandler() {

oWrapper.style.display = obj.value != ‘‘ ? ‘none‘ : ‘inline-block‘;

}

/**

*
@name getStyle

* @class 获取样式

* @param {Object} obj 要获取样式的对象

* @param {String} styleName 要获取的样式名

*/

function getStyle(obj, styleName) {

var oStyle = null;

if (obj.currentStyle)

oStyle = obj.currentStyle[styleName];

else if (window.getComputedStyle)

oStyle = window.getComputedStyle(obj, null)[styleName];

return oStyle;

}

}

}

}

</script>

</body>

</html>

时间: 2024-10-12 16:53:55

跨浏览器placehoder的相关文章

让IE支持placeholder属性,跨浏览器placehoder

在html5中,文本框,也就是input, type为text,或者password,新增了一个属性placeholder,也就是占位符,以下是firefox浏览器下的表现形式,当输入的时候,占位符就会消失.这个属性非常好用,因为有这个必要html5才会因素这个属性,然而在IE下,就没有这效果,以下是IE9的表现. 下面是JS版: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

跨浏览器的placeholder – 原生JS版

转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提供对输入字段预期值的提示信息,input为空且未获得焦点时显示,获得焦点时消失,非常实用.目前,大部分现代浏览器都对placeholder属性提供了支持,IE10也是支持的.如果需要使IE6~IE9等浏览器支持placeholder,只有借助js了. 在这些不支持原生placeholder属性的浏览

常用跨浏览器设置——JS总结

常用跨浏览器设置--JS总结 1.跨浏览器添加事件 <pre name="code" class="javascript"> function addEvent(obj,type,fn) { if (obj.addEventListener) { obj.addEventListener(type,fn,false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } }

跨浏览器resize事件分析

resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera 触发1次 Safari 触发1次 场景分析 window resize时,部分组件需要重置大小(一次):部分组件不需要重置大小: 开源库分析 jquery-resize 优点:使用简便 $('#div1').on('resize', function (e) { console.log('[div1

JS-DOM2级事件对象跨浏览器处理(已封装)

1 var eventUill = { 2 //添加事件 3 addHander: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 element.attachEvent('on' + type, handler); 8 } else {

JS 事件(4)——跨浏览器的事件对象

跨浏览器的事件对象详解 封装事件对象 1 var event_util = { 2 //添加事件 3 addHandler: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 element.attachEvent("on" +

跨浏览器的placehold

如何实现跨浏览器的placeholder效果呢? 先看下效果 js代码如下: $('#username').placeholder({ word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 4, minLen: 2, errorBorderClass: 'errorBorder', keyup_callback: function () { console.log('keyup_callback'); } }); $('#pas

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)

案例:整搜索框,需要默认占位符为"请输入关键词",获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位.这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个"placeholder"属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即JavaScript. 上述案例的一个图例:     下面我们就使用