现在的位置: 首页 > 综合 > 正文

javascript优雅实现文本输入框的placeholder

2012年09月21日 ⁄ 综合 ⁄ 共 3176字 ⁄ 字号 评论关闭

要实现的placeholder的功能:

(类似于新浪微博登陆页面文本框在FF浏览器下的表现)

当文本输入框开始输入文本时默认文本消失,当删除了输入的文本时默认文本出现。(非得到或者失去焦点时出现或消失)

 

页面结构:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>a.html</title>
</head>
<body>
    <style>
        .gform label{position:relative;}
        .gform .placeholder{position:absolute;left:0;top:0;padding:0 5px;color:#999;}
        .gform .text-entry{width:200px;}
    </style> <div class="gform"> <fieldset> <legend>团购搜索</legend> <div class="area"> <label for="keyword-search"> <span class="placeholder">请输入宝贝名称或链接</span> <input type="text" value="" id="keyword-search" class="text-entry" /> </label> <a href="javascript:void(0)" class="gbtn gbtn-search" title="点击搜索">搜索</a> </div> </fieldset> </div>
<script src="../jquery.js"></script>
<script src="placeholder.js"></script>
</body> </html>

 

这样的页面结构的好处是:

当javascript失效时,fieldsetplaceholder会显示出来,更易于用户体验。placeholder与input框仍然在同一label下,依然可以实现点击placeholder的同时input框被选中。

好了,我们想这就是注册个keyup与keydown的事件判断一下值而已。

初步的placeholder.js如下:

/**
 * 文本框(input,texteare,password)的focus,keydown等事件添加
 */

 var addFoucsEvent = function (selecter){

    $(selecter).live({

        keydown : function (){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                placeholder.hide();
            };
        },
        keyup : function (ev){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                    placeholder.show();
            }

        }
    });

 }
addFoucsEvent('.text-entry')

测试一下以上代码,我们欣喜的发现,实现了我们想要的功能。但是一细看,悲剧的发现了一个bug。

在IE系浏览器下面,把输入法调整为中文的时候,输入第一个字,每按一下就会闪动一次。

(这个闪动的具体bug案例请参见淘宝天猫在IE下的表现)

原因是当拼音或五笔输入法输入的时候,我们触发了keyup和keydown的事件,并且input框内的值都为空。IE又虎,所以就执行了两个事件,先show出来又hide掉。所以就闪动了。

想了想,在keyup的时候判断一下键值吧。如果按得不是回退键或者delete键,就不让placeholder出来,在原来的功能上多加一层判断。

进化后的代码如下:

/**
 * 文本框(input,texteare,password)的focus,keydown等事件添加
 */

 var addFoucsEvent = function (selecter){

    $(selecter).live({

        keydown : function (){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                placeholder.hide();
            };
        },
        keyup : function (ev){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                if(ev.keyCode == 46 || ev.keyCode == 8){
                    placeholder.show();
                }
            }

        }
    });

 }
addFoucsEvent('.text-entry')

急匆匆的去IE看看是不是问题解决了。

嗯。。确实如此,当输入中文的时候不再闪动了。

但还是有个小小的bug。。。

输入中文时确实不闪了,但是当输入法的框还在,值依然为空时,按回退键的时候,依然闪动了,因为我们加的判断条件就是回退和delete的时候执行。

顿时觉得空前的迷茫,一下子思绪万千,难道不得不计算我按了多少下并且计算还剩多少个字符神马神马的才能真正的实现此效果么?

伤心的去各大网站上寻找实现类似效果的输入框。走了一大圈,发现要么就是对IE做了降级的兼容,要么就是觉得此种小小的bug不需要计较就这样放在站上。

所以不得不对IE进行单独的处理。

代码如下

/**
 * 文本框(input,texteare,password)的focus,keydown等事件添加
 */

 var addFoucsEvent = function (selecter){

    $(selecter).live({
        focusout : function (){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                placeholder.show();
            };
        },
        keydown : function (){
            var _this = $(this),
                placeholder = _this.siblings('.placeholder');
            if (_this.val() == '' && placeholder.length != 0){
                placeholder.hide();
            };
        }
    });

    if(!$.browser.msie){
        $(selecter).live({
            keyup : function (ev){
                var _this = $(this),
                    placeholder = _this.siblings('.placeholder');
                if (_this.val() == '' && placeholder.length != 0){
                    if(ev.keyCode == 46 || ev.keyCode == 8){
                        placeholder.show();
                    }
                }
            }
        })
    }
 }
addFoucsEvent('.text-entry')

此时的效果:

在FF等好浏览器上,实现当键盘按下时placeholder消失,键盘抬起时若文本框值为空时placeholder显示的功能。

在IE的坑爹浏览器上,实现当键盘按下时placeholder消失,文本输入框失去焦点并且值为空时placeholder显示的功能。

 

抱歉!评论已关闭.