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');
            }
        }
    }
}
posted @ 2018-03-14 22:14  waslm  阅读(116)  评论(0编辑  收藏  举报