用jQuery实现兼容Ie的placeholder
当我们在做登录或注册方面的功能时,一般都会涉及表单,随着html5的使用,越来越多的人喜欢用placeholder,毕竟placeholder本来就是为做提醒使用的,再加上他不需要额外布局,减少了很多没必要的代码。但是在低版本的ie浏览器中,对Placeholder的支持却不是那么友好,我们设置的文字并不能显示出来,这个时候,就需要用js来实现了。这个不存在什么原理不原理的,我就直接上代码了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var handleFixInputPlaceholderForIE = function () { //fix html5 placeholder attribute for ie7 & ie8 if (isIE8 || isIE9) { // ie7&ie8 // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields) jQuery('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function () { var input = jQuery(this); if(input.val()=='' && input.attr("placeholder") != '') { input.addClass("placeholder").val(input.attr('placeholder')); } input.focus(function () { if (input.val() == input.attr('placeholder')) { input.val(''); } }); input.blur(function () { if (input.val() == '' || input.val() == input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } } |
使用时记得和往常一样,要在你的输入框上设置了placeholder哦。
发表评论