搜索
首页web前端js教程jQuery封装placeholder的实例代码
jQuery封装placeholder的实例代码Jul 21, 2017 pm 05:27 PM
firefoxjqueryplaceholder

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即:

<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>

最多加点样式控制下默认文字的颜色

input::-webkit-input-placeholder{color:#AAAAAA;}

但是在低版本的浏览器却不支持这个placeholder属性,那么真的要在低版本浏览器也要实现跟placeholder一样的效果,就需要写个插件来兼容下,下面就细讲一下怎样用jquery来实现这个模拟效果。

实现这个模拟效果,页面的一般调用方式:

$('input').placeholder();

首先,先写jquery插件的一般结构:

;(function($){
    $.fn.placeholder = function(){//实现placeholder的代码    }
})(jQuery)

下面我们就要判断浏览器是否支持placeholder属性

;(function($){
    $.fn.placeholder = function(){this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)

我们要支持链式操作,如下:

;(function($){
    $.fn.placeholder = function(){         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)

默认配置项:

options = $.extend({
    placeholderColor:'#aaaaaa',
    isSpan:false, //是否使用插入span标签模拟placeholder的方式,默认是不需要onInput:true //实时监听输入框},options);

如果不需要通过span来模拟placeholder效果,那么就需要通过输入框的value值来判断,如下代码:

if(!options.isSpan){
    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
    }).blur(function () {if($(_this).val() == defaultValue) {
            $(_this).css('color', defaultColor);
        }else if($(_this).val().length == 0) {
            $(_this).val(defaultValue).css('color', options.placeholderColor)
        }
    }).trigger('blur');
}

如果需要同span标签来模拟placeholder效果,代码如下:

var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
$simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
});//通过before把当前$simulationSpan添加到$(_this)前面,并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
    $(_this).trigger('focus');
}));//当前输入框聚焦文本内容不为空时,模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
    $(_this).bind(inputChangeEvent, function () {
        $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
    });
}else {
    $(_this).focus(function () {
        $simulationSpan.hide();
    }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
    });
};

整体代码:

;(function($){
    $.fn.placeholder = function(options){
        options = $.extend({
            placeholderColor:'#aaaaaa',
            isSpan:false, //是否使用插入span标签模拟placeholder的方式,默认是不需要onInput:true //实时监听输入框        },options);         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作var defaultValue = $(_this).attr('placeholder');var defaultColor = $(_this).css('color');if(!options.isSpan){
                    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
                        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
                    }).blur(function () {if($(_this).val() == defaultValue) {
                            $(_this).css('color', defaultColor);
                        }else if($(_this).val().length == 0) {
                            $(_this).val(defaultValue).css('color', options.placeholderColor)
                        }
                    }).trigger('blur');
                }else{var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
                    $simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
                    });//通过before把当前$simulationSpan添加到$(_this)前面,并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
                        $(_this).trigger('focus');
                    }));//当前输入框聚焦文本内容不为空时,模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
                        $(_this).bind(inputChangeEvent, function () {
                            $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
                        });
                    }else {
                        $(_this).focus(function () {
                            $simulationSpan.hide();
                        }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
                        });
                    };
                }
            }
        });
    }
})(jQuery);

调用方式,需要通过span标签来模拟的话:

$("#username").placeholder({
    isSpan:true});

 

以上是jQuery封装placeholder的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Ubuntu Linux中如何删除Firefox Snap?Ubuntu Linux中如何删除Firefox Snap?Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中删除FirefoxSnap,可以按照以下步骤进行操作:打开终端并以管理员身份登录到Ubuntu系统。运行以下命令以卸载FirefoxSnap:sudosnapremovefirefox系统将提示你输入管理员密码。输入密码并按下Enter键以确认。等待命令执行完成。一旦完成,FirefoxSnap将被完全删除。请注意,这将删除通过Snap包管理器安装的Firefox版本。如果你通过其他方式(如APT包管理器)安装了另一个版本的Firefox,则不会受到影响。通过以上步骤

jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

mozilla firefox可以卸载吗mozilla firefox可以卸载吗Mar 15, 2023 pm 04:40 PM

mozilla firefox可以卸载;firefox属于第三方浏览器,如果不需要,完全可以卸载。卸载方法:1、在开始菜单中,依次点击“Windwos系统”-“控制面板”;2、在“控制面板”界面中,点击“程序和功能”;3、在新界面中,找到并双击火狐浏览器图标;4、在卸载弹窗中,点击“下一步”;5、点击“卸载”即可。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),