直接看效果点这里
HTML
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> Placeholder </title> </head> <body> <input class="J_Placeholder" type="text" value=""/> <textarea class="J_Placeholder"></textarea> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="jquery.placeholder.js"></script> <script> $('.J_Placeholder').placeholder({ 'txt': '请输入提示信息' }); </script> </body> </html>
JS
/** * @description: 表单input、textarea占位提示 * @author:jununx@gmail.com * @update: 2014/11/10 * * @param txt{string} 提示信息语句 * * 用法 * * $('.J_Placeholder').placeholder({ * 'txt': '请输入提示信息' * }); */ ;(function($){ var methods = { init: function(opts){ this.isHtml5Placeholder() ? this.changeHtml5Placeholder(opts) : this.changePlaceholder(opts); }, isHtml5Placeholder: function(){ var res = 'placeholder' in document.createElement('input'); return res; }, changePlaceholder: function(opts){ opts.that.attr('value') == '' && opts.that.attr({ 'value': opts.txt }); opts.that .on('focus', function(){ if($(this).val() === opts.txt){ $(this).attr('value', ''); } }) .on('blur', function(){ if($(this).val() == ''){ $(this).attr({ 'value': opts.txt }); } }); }, changeHtml5Placeholder: function(opts){ opts.that.attr({ 'placeholder': opts.txt }); } }; $.fn.placeholder = function(opts){ opts = $.extend({ 'that': this, 'txt': '' }, opts || {}); methods.init(opts); return this; }; })(jQuery);