现在位置首页 / 前端开发 /正文

jquery input文本框输入框智能文字提示插件-jquery.promptInput

作者: IT小兵 | 2014年8月8日| 热度:℃ | 评论: |参与:

在html开发过程中,我们经常需要在form中提示用户每个输入框代表的是什么数据,需要怎么输入。这里就需要给用户较好的提示。

当然方式有很多,这里分享一个能在输入框中出现提示的插件:jquery.promptInput。这个插件还是比较小的。

当然如果你开发的是html5的话,placeholder属性本身也不错了。


先看效果图:

我推荐这个效果,因为在界面占用的空间非常小。比传统的内容管理界面要简洁好多。

下面正式说明jquery.promptInput。

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

调用方式:

 <!DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="jquery.promptInput.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#signUp').click(function () {
                alert('username: ' + $('#username').val());
            });
        });
    </script>
</head>
<body>
        <input class="prompt-input" type="text" value="请输入用户名" id="username" />
        <div id="signUp">Sign up</div>
</body>
</html>

源代码:

/*
 *
 * Version: 1.2.0
 * Author: jinglan.woo(a)gmail.com
 * Date: 2014.08.07
 *
 * Friendly prompt text input box: 
 * the text input box has focus prompt disappears 
 * and  prompt appears again when it out of focus
 *
 */
(function ($) {
    $.fn.promptInput = function (prompt, fontColor) { 
        var $this = $(this); //当前传入文本框
        prompt = prompt ? prompt : $this.val(); //在输入框中显示的提示语
        fontColor = fontColor ? fontColor : '#ccc'; //提示语的颜色
        var $promptInput = $this.clone(); //克隆传入的文本框,用于展示
        $promptInput.addClass('prompt-input').css('color', fontColor)
            .attr('prompt', prompt).attr('type','text').removeAttr('name').removeAttr('id')
            .val(prompt); //实例化用于展示的文本框
        $promptInput
            .focusin(function () { //获取焦点时去掉提示
                $(this).css('color', '');
                if ($(this).val() == $(this).attr('prompt')) {
                    $(this).val('');
                }
            })
            .focusout(function () { //失去焦点时显示提示
                if ($(this).val().replace(/\s/g, '') == '') {
                    $(this).val($(this).attr('prompt')).css('color', fontColor);
                    $(this).next().val('');
                }
            }).change(function () { //值发生改变时,同时为当前传入文本框赋值
                $(this).next().val($(this).val());
            }); 
        $this.attr('type', 'hidden').val(''); //改变当前传入文本框类型为隐藏域
        $promptInput.insertBefore($this); //同时追加克隆体到页面
    };
})(jQuery);
$(function () {
    $('.prompt-input').each(function (index, element) { //页面加载完成自动检测 .prompt-input 类,加载效果
        $(element).promptInput();
    });
});
jquery.promptInput.js


插件官方地址:

https://github.com/jinglanwoo/jQuery-Plungin 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询