[Java教程]一个友好的文本框内显示提示语 jquery 插件

0 2014-08-08 18:01:25

插件实现文本框内默认显示提示语，当文本框获得焦点时提示语消失。 如果没有输入或输入为空则失去焦点时提示语再次出现。

同时它的使用非常舒适简单，引入插件及 jquery 后，在原有的文本框内加上样式类()以及设置值(value="Your prompt")为提示语就可以了。

像这样：1

同时获取值的方式无需任何更改，这样在已完成的项目上加上插件效果也没有任何改动上的压力了。

实现 js：

1 /* 2 * 3 * Version: 1.2.0 4 * Author: jinglan.woo(a)gmail.com 5 * Date: 2014.08.07 6 * 7 * Friendly prompt text input box: 8 * the text input box has focus prompt disappears 9 * and prompt appears again when it out of focus10 *11 */12 13 (function ($) {14 $.fn.promptInput = function (prompt, fontColor) { 15 var $this = $(this); //当前传入文本框16 prompt = prompt ? prompt : $this.val(); //在输入框中显示的提示语17 fontColor = fontColor ? fontColor : '#ccc'; //提示语的颜色18 19 var $promptInput = $this.clone(); //克隆传入的文本框，用于展示20 21 $promptInput.addClass('prompt-input').css('color', fontColor)22 .attr('prompt', prompt).attr('type','text').removeAttr('name').removeAttr('id')23 .val(prompt); //实例化用于展示的文本框24 25 $promptInput26 .focusin(function () { //获取焦点时去掉提示27 $(this).css('color', '');28 if ($(this).val() == $(this).attr('prompt')) {29 $(this).val('');30 }31 })32 .focusout(function () { //失去焦点时显示提示33 if ($(this).val().replace(/\s/g, '') == '') {34 $(this).val($(this).attr('prompt')).css('color', fontColor);35 $(this).next().val('');36 }37 }).change(function () { //值发生改变时，同时为当前传入文本框赋值38 $(this).next().val($(this).val());39 }); 40 41 $this.attr('type', 'hidden').val(''); //改变当前传入文本框类型为隐藏域42 $promptInput.insertBefore($this); //同时追加克隆体到页面43 };44 })(jQuery);45 46 $(function () {47 $('.prompt-input').each(function (index, element) { //页面加载完成自动检测 .prompt-input 类，加载效果48 $(element).promptInput();49 });50 });

jquery.promptInput.js

使用 html：1 2

3 4 5 12 13 14 15

16 17