JQuery Placeholder

Placeholder属性是HTML5为Input添加的,在Input上提供一个占位符,文字形式展示输入文字预期值的提示信息。

如:

需要使用:placeholdr.js

内容:

/**
* @name placeHolder
* @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器,通过value或插入span元素两种方案模拟
* @param {Object} obj 要应用placeHolder的表单元素对象
* @param {Boolean} span 是否采用悬浮的span元素方式来模拟placeHolder,默认值false,默认使用value方式模拟
*/
//执行
jQuery(function(){
jQuery(':input[placeholder]').each(function(index, element) {
placeHolder(element,true);
});
});
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');
var type = obj.getAttribute('type');
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'))!=0 ? getStyle(obj, 'marginTop'): 0 + 'px';
oWrapper.style.paddingLeft = getStyle(obj, 'paddingLeft');
oWrapper.style.width = (obj.offsetWidth - parseInt((getStyle(obj, 'marginLeft')=="auto"?0:(getStyle(obj, 'marginLeft')))))==0?100:(obj.offsetWidth - parseInt((getStyle(obj, 'marginLeft')=="auto"?0:(getStyle(obj, 'marginLeft'))))) + 'px';
oWrapper.style.height = obj.offsetHeight==0?34:obj.offsetHeight + 'px';
oWrapper.style.lineHeight = obj.nodeName.toLowerCase()=='textarea'? '':(obj.offsetHeight==0?34:obj.offsetHeight) + 'px';
oWrapper.appendChild(placeHolderCont);
obj.parentNode.insertBefore(oWrapper, obj);
oWrapper.onclick = function () {
obj.focus();
};
//绑定input或onpropertychange事件,ie9中删除时无法触发此事件
if (typeof(obj.oninput)=='object') {
obj.addEventListener("input", changeHandler, false);
obj.onpropertychange = changeHandler;
obj.onkeyup = delHandler;
} else {
obj.onpropertychange = changeHandler;
obj.onkeyup = delHandler;
}
function changeHandler() {
oWrapper.style.display = obj.value != '' ? 'none' : 'inline-block';
}
function delHandler(e){//监听del、backspace、ctrl+x
var e = e || window.event;
if(e.keyCode == 8 || e.keyCode == 46 || (event.ctrlKey&&e.keyCode == 88)){
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;
}
}
}
}

使用

<input type="text" name="userName" id="userName" placeholder="用户名"/>
<input type="password" name="userPassWord" id="userPassWord" placeholder="密码" />

JQuery Placeholder - Input提示信息的更多相关文章

  1. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  2. jquery.placeholder.js的使用

    最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...

  3. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  4. jQuery弹出提示信息简洁版(自动消失)

    之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  6. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  7. JQuery设置input属性(disabled、enabled)

    document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton&q ...

  8. JQuery让input从disabled变成enabled

    JQuery让input从disabled变成enabled document.getElementByIdx_x("removeButton").disabled = false ...

  9. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

随机推荐

  1. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  2. ASP.NET MVC ActionResult的其它返回值

    一.ascx页面 场景:要返回代码片断,比如Ajax返回一个子页 我们先新建一个Action public ActionResult Ascx() { return PartialView(); } ...

  3. MySQL与SqlServer中update操作同一个表问题

    一 SqlServer中操作如下图 这个是没问题的. 二 MySQL中操作如下图 但是在MySQL中想实现这个功能如下图,但是出错了. 原来是MySQL中不支持子查询的 我们可以这样修改一下就可以实现 ...

  4. BestCoder Round #41

    T1:ZCC loves straight flush(hdu 5228) 题目大意: 给出5张牌,问至少替换多少张牌可以构成同花顺. 题解: 1.直接枚举所有同花顺(枚举花色A-D和最小的数字1-1 ...

  5. wp8.1 Study16:网络之 使用Azure移动服务及利用Azure推送通知服务

    一.WP8.1有关网络的API WP8.1与其它平台的对比如下图: 二.Azure移动服务 前提: Azure移动服务可以让使用者的数据存放在云空间,从而方便使用者的App在不同平台上的数据共享. 1 ...

  6. 爬虫:pycurl模块的使用说明

    pycurl参考文档:http://pycurl.io/docs/latest/index.html   是英文文档,看起来也不是特么吃力跟着做问题不大. #coding=utf-8 import p ...

  7. cloud theory is a failure? 分类: Cloud Computing 2013-12-26 06:52 269人阅读 评论(0) 收藏

    since LTE came out, with thin client cloud computing  and broadband communication clouding 不攻自破了.but ...

  8. vs2013 遇到的web性能记录器无法使用问题

    诊断和修复Web测试记录栏的问题.自2005年以来VSTS运也出现了各种由客户多年来提出不同的问题.记录Web测试时,这在一定程度经常提到的一个话题是一个残疾或不存在的Web测试记录吧.因为它可以令人 ...

  9. 立即调用的函数表达式IIFE

    1.写法 (function () { alert("IIFE");})();//或者(function () { alert("IIFE"); }());

  10. ASP.NET Cookie存值问题

    想必 用Cookie存值已经是很普遍的了,我也是刚学习了一点皮毛,现在就记下一点知识,便于日后翻阅. 1.C#代码存取Cookie值 //用Request获取到客户端Cookie  判断是否为空 if ...