码迷,mamicode.com
首页 > Web开发 > 详细

一个友好的文本框内显示提示语 jquery 插件

时间:2014-08-08 17:30:06      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   os   io   

插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失。 如果没有输入或输入为空则失去焦点时提示语再次出现。
同时它的使用非常舒适简单,引入插件及 jquery 后,在原有的文本框内加上样式类(class="prompt-input")以及设置值(value="Your prompt")为提示语就可以了。

像这样:

1 <input class="prompt-input" type="text" value=Your prompt />

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

实现 js:

bubuko.com,布布扣
 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 focus
10  *
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         $promptInput
26             .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 <!DOCTYPE html>
 2 <head>
 3     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 4     <script src="jquery.promptInput.js"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             $(#signUp).click(function () {
 8                 alert(username:  + $(#username).val());
 9             });
10         });
11     </script>
12 </head>
13 <body>
14         <input class="prompt-input" type="text" value="请输入用户名" id="username" />
15         <div id="signUp">Sign up</div>
16 </body>
17 </html>

 可以复制以上代码直接运行,也可以在这里下载完整代码及演示。

 

一个友好的文本框内显示提示语 jquery 插件,布布扣,bubuko.com

一个友好的文本框内显示提示语 jquery 插件

标签:style   blog   http   color   java   使用   os   io   

原文地址:http://www.cnblogs.com/muriel/p/3899492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!