这次给大家带来文本框和密码框实现灰色预提示文字，文本框和密码框实现灰色预提示文字的注意事项有哪些，下面就是实战案例，一起来看一下。
很久之前写了这个插件，基于jQuery实现的，主要用于IE下实现placeholder效果，可同时支持文本和密码输入框。
placeholder是HTML5新增的一个属性，当input设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失。
实现代码如下：
- (function($) { var placeholderfriend = { focus: function(s) { s = $(s).hide().prev().show().focus(); var idValue = s.attr("id"); if (idValue) { s.attr("id", idValue.replace("placeholderfriend", "")); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class", clsValue.replace("placeholderfriend", "")); } } } //判断是否支持placeholder function isPlaceholer() { var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if (!isPlaceholer()) { $(function() { var form = $(this); //遍历所有文本框，添加placeholder模拟事件 var elements = form.find("input[type='text'][placeholder]"); elements.each(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (pValue) { if (sValue == '') { s.val(pValue); } } }); elements.focus(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (sValue && pValue) { if (sValue == pValue) { s.val(''); } } }); elements.blur(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (!sValue) { s.val(pValue); } }); //遍历所有密码框，添加placeholder模拟事件 var elementsPass = form.find("input[type='password'][placeholder]"); elementsPass.each(function(i) { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (pValue) { if (sValue == '') { //DOM不支持type的修改，需要复制密码框属性，生成新的DOM var html = this.outerHTML || ""; html = html.replace(/s*type=(['"])?password/gi, " type=text placeholderfriend") .replace(/s*(?:value|on[a-z]+|name)(=(['"])?S*)?/gi, " ") .replace(/s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' "); var idValue = s.attr("id"); if (idValue) { s.attr("id", idValue + "placeholderfriend"); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class", clsValue + "placeholderfriend"); } s.hide(); s.after(html); } } }); elementsPass.blur(function() { var s = $(this); var sValue = s.val(); if (sValue == '') { var idValue = s.attr("id"); if (idValue) { s.attr("id", idValue + "placeholderfriend"); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class", clsValue + "placeholderfriend"); } s.hide().next().show(); } }); }); } window.placeholderfriendfocus = placeholderfriend.focus;})(jQuery);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jQuery Mobile初始化事件使用（案例详解）
设置多行文本框[textarea]自动生成高度
以上就是文本框和密码框实现灰色预提示文字的详细内容，更多请关注【创想鸟】其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
