迅闻网
让更多人看到你

html表单文本框输入提示文字

  html表单文本框输入提示文字

jQuery.setTip.js,一个优异的jQuery插件,经过设置输入框的默许value值来兼容各版别的浏览器。
在前端开发中,提交表单是经常遇到的,一个友爱的表单页面(登陆、注册等)对于提高用户体验来说非常重要。在表单的输入框咱们一般都会写入提示性的问题,比如“请输入手机号”等。较为理想的状况是,用户看到这段提示性文字,当用户鼠标点击的时分,输入框为空,便利用户填入文字。
一般情况下咱们都会使用,可是placeholder作为一个html5特点,它并不支撑IE8及以下版别的ie,为此笔者写过《placeholder特点在IE中失效的处理办法》
但最近笔者发现一个优异的jQuery插件,经过设置输入框的默许value值来兼容各版别的浏览器。这时你或许会说,value值是实实在在存在输入框中的,是默许值,用户需求删除它才干继续输入内容,不友爱啊。是的,咱们直接在输入框写入确实不太友爱,所以这个插件就处理了这个问题啊

html
当用户翻开页面的时分,插件对赋予默许的value值,而当用户点击输入框的时分,插件将会去除value值,完成了placeholder的功用,而又兼容各种浏览器,非常的有用啊。
下面将插件代码放出来
(function($){
$.fn.setTip=function(options){
vardefaults={
defaultValue:””,
focusColor:”#000000″,
blurColor:”#ccc”,
fontSize:”10pt”
}
varoptions=$.extend(defaults,options);
this.each(function(){
varthisSearch=$(this);
thisSearch.focus(function(){
if(thisSearch.val()==options.defaultValue){
thisSearch.css(“color”,options.focusColor);
thisSearch.val(“”);
}
}).blur(function(){
if(thisSearch.val()===undefined||thisSearch.val()==”){
thisSearch.css(“color”,options.blurColor);
thisSearch.val(options.defaultValue);
}
}).css({“color”:options.blurColor,”font-size”:options.fontSize});
if(thisSearch.val()==’undefined’||thisSearch.val()==””){
thisSearch.val(options.defaultValue);
}elseif(thisSearch.val()!=options.defaultValue){
thisSearch.css(“color”,options.focusColor);
}
});
};
})(jQuery);
可以将其直接放入你的js文件中,可是考虑到维护性,笔者主张你将其另存为jQuery.setTip.js,以便多处调用。
之后设置需求启用此功用的输入框
$(document).ready(function(){
$(“#newInput”).setTip({defaultValue:”国际,你好!”});
});
此刻,输入框的提示文字效果就出来了。在线demo
对了,这是jQuery插件,是要先加载jQuery库的哦。
本文最终更新于2017年7月6日,已超过1年没有更新,如果文章内容或图片资源失效,请留言反应,咱们会及时处理,谢谢!

未经允许不得转载:迅闻网 » html表单文本框输入提示文字
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页