实现一个密码显示效果(非明文显示)

效果如下图所示,输入密码后鼠标点击其他地方,显示圆点代替





实现代码如下:

js扩展代码

(function($){
    /**
     * datagrid扩展
     */
    $.extend($.fn.datagrid.defaults.editors, {
        password: {
            init: function(container, options){
                return $('<input type="password" class="datagrid-editable-input" />').appendTo(container);
            },
            destroy: function(target){
                $(target).remove();
            },
            getValue: function(target){
                return $(target).val();
            },
            setValue: function(target, value){
                $(target).val(value);
            },
            resize: function(target, width){
                $(target)._outerWidth(width);
            }
        }
    });
})(jQuery);
初始化


 columns = [[
    {field: 'name', title: '名称', width: 80, sortable: true},
    {field: 'value', title: '参数', width: 200, sortable: false, formatter:function(value, arr){
        var editor = '';
        if(typeof arr.editor == 'object'){
            editor = arr.editor.type;
        }else{
            editor = arr.editor;
        }
        switch(editor){
            case 'password':
                return value.replace(/./g, '●');
                break;
            default:
                return value;
        }
    }}
]];
原文链接:http://www.thinkphp.cn/code/1516.html


欢迎留言