placeholder的兼容

需求

在用户登陆输入框中给予“请输入用户名”的提示，一旦选中提示消失，并且兼容老版ie

解决方案

首先最先想到的是html5的placeholder属性，对于兼容性问题，晚上也有较好的解决方案。

随便给两个链接吧：
HTML5 placeholder实际应用经验分享及拓展
HTML5 Placeholder jQuery Plugin

本来我也以为挺简单，后来仔细一看，nnd，要选中后就消失，so, 再想办法吧（需求就这样，没办法）

那就只能自己用jquery搞定了，监听blur,focus事件来处理吧
逻辑不是太复杂。

唯一需要注意的是 password框的差异，因为js是没有办法对password类型的input赋值的,并且赋值后也是点点点，压跟不是提示，所以password需要特殊处理. blur时判断是否有值 没有值则新建一个text,在text里实现提示的显示并隐藏密码框，再在该text上绑定focus事件，来隐藏text显示password。

提示信息颜色会比较浅，我通过css class来实现，这样更好判断是提示信息还是用户输入的数据。

记住密码

说到这儿就额外说一个问题：
记住密码的实现
我接手的原代码是通过保存cookie实现的，在第一次进入的时候，判断cookie是否存在用户名密码，存在则赋值给登陆界面上的输入框。大家或许知道问题是什么呢，密码框没有办法赋值...
项目用的还是WebForm，直接在后台this.password.value=''是不起作用的，前台jquery也不能赋值。
唯一的就是在html生成的时候就赋值，也就是<input name="password" type="password" id="password" maxlength="100" class="kskrngg" value="<%= MemorizedPassword %>" /> 这儿就不能使用服务器控件了，如果使用了服务器控件，这样赋值还是会失败的。貌似webform的机制就是这样，对于password的input,不保存值，状态，不赋值，而且你赋值了还会清空值，也是厉害。这也就意味这后台没有办法通过this.password.value来获取值了 ，这时候就只能使用request.Form['password']来获取值。

代码如下：

// 页面placeholder配置
function initPlaceholder() {
    var $user = $('#user'), $password = $('#password');

    // 绑定user和password的blur和focus事件，来实现placeholder
    $user.on('focus', { notice: DEFAULT_USER_NOTICE }, modifyPlaceholder).on('blur', { action: 'blur', notice: DEFAULT_USER_NOTICE }, modifyPlaceholder);
    $password.on('blur', { action: 'blur', notice: DEFAULT_PASSWORD_NOTICE }, modifyPlaceholder);

    // 初始化处理
    $user.trigger('blur');
    $password.trigger('blur');
}

// jquery事件处理函数 修改placeholder
function modifyPlaceholder(event) {
    var that = this;
    // password框需要特殊处理，创建text,在获取和失去焦点时切换
    if ($(that).attr('type') === 'password') {
        if (event.type === 'blur') {
            if ($(that).val().length === 0) {
                //如果password框没有值，则添加Text框实现提示信息
                var $passwordText = $('<input type="text" class="kskrngg" value="' + event.data.notice + '" />')
                $(that).after($passwordText);
                $passwordText.addClass('placeholder');
                $passwordText.show();
                $(that).hide();

                $passwordText.on('focus', function (event) {
                    $passwordText.hide();
                    $(that).show();
                    $(that).focus();
                });

                $(that).on('blur', function (event) {
                    if ($(this).val().lenght === 0) {
                        $passwordText.show();
                        $(this).hide();
                    }
                })
            }
        }
    } 
    //一般处理情况
    else {
        if (event.type === 'focus') {
            if ($(that).val() === event.data.notice && $(that).hasClass('placeholder')) {
                $(that).val('');
                $(that).removeClass('placeholder');
            }
        } else {
            if ($(that).val().length === 0) {
                $(that).val(event.data.notice);
                $(that).addClass('placeholder');
            }
        }
    }
}

转载于:https://www.cnblogs.com/prayol/p/8507982.html