用jQuery 给输入框传值提高用户体验的小方法

在用户往输入框中输入之前，输入框中有文字提醒或者说明，当用户点击提醒取消，当用户移出输入框提醒恢复，是一种不错的用户体验，另外还可以解决某些输入框位置太狭小导致无处放label的尴尬。

这个过程用jqeury很好实现，但是其中的一些小问题要考虑清楚。

下面便是我的过程:

<input id="username" type="text"/>
<input id="password" type="password">

<style>
   .wordOn{background:url(password_input_bg.jpg) center center no-repeat;}
</style>

            $(document).ready(function(){
                
                var label = '帐号：';//预设值
                $('#username').css('color','gray').val(label)//初始化输入框状态
                .focus(function(){
                    if($(this).val() == label){//如果是预设值点击清空并变色
                        $(this).val('').css('color','black');
                    }
                })
                .blur(function(){
                    if($(this).val() == ''){//如果用户未输入内容输入框还原初始化
                        $(this).val(label).css('color','gray');
                    }
                })
                
                //密码，input的type值在js中无法改变，改变password的val值也存在不可预知的风险
                //所以通过给带文字的背景图片class wordOn 来实现
                $('#password').addClass('wordOn')
                    .focus(function(){
                        if($(this).val() == ''){
                            $(this).toggleClass('wordOn');//如果用户没输入内容，点击状态切换
                        }else{
                            $(this).removeClass('wordOn');//用户如果有输入，保证无文字背景
                        }
                    })
                    .blur(function(){
                        if($(this).val() == ''){//如果用户没输入，到有字状态
                            $(this).addClass('wordOn');
                        }else{
                            $(this).removeClass('wordOn');//用户如果有输入，保证无文字背景
                        }
                })
                
            })

上面提供了两个思路，第一种思路不能用在type为password的input下，第二种应用范围比较广泛，

对于密码的提示，还有另外的一个解决方法，就是写两个input，一个text，一个password，用户点击移开时来回切换。