1. number.js

odoo.define('module.NumWidget', function (require) {
   'use strict';

    var core = require('web.core');
    var Column = core.list_widget_registry.get('field');
    var ColumnNumber = Column.extend({
        format: function (row_data, options) {
            var value = this._super.apply(this, arguments);
            if (isNaN(value)) {
                return null;
            }
            return value.slice(0, 3) + '****' + value.slice(value.length - 4);
        }
    });
    core.list_widget_registry.add('field.number', ColumnNumber)

    var FieldChar = core.form_widget_registry.get('char');
    var NumWidget= FieldChar.extend({
        template: "NumWidget",

        events: {
            'change': 'store_dom_value'
        },

        initialize_content: function () {
            this._super();
            this.$el.addClass('o_form_field_number');
        },
        store_dom_value: function () {
            if (this.$input && this.is_syntax_valid()) {
                var val = this.$input.val();
                if (val.indexOf('*') === -1) {
                    this.internal_set_value(this.parse_value(val));
                }
            }
        },
        render_value: function () {
            var r_value = this.format_value(this.get('value'), ''), s_value;
            s_value = this.number_value(r_value);
            if (this.$input) {
                this.$input.val(s_value);
            } else {
                this.$el.text(s_value);
            }
        },
        number_value: function (num) {
            if (!num) return '';
            num= num.slice(0, 3) + '****' + num.slice(num.length - 4);
            return num;
        }
    });
    core.form_widget_registry.add('number', NumWidget);

    return NumWidget

});

static/xml/widget.xml

<?xml version="1.0" encoding="utf-8"?>

<templates>
    <t t-name="NumWidget" t-extend="FieldChar"/>
</templates>

2. percent.js

odoo.define('module.utils', function (require) {

    var core = require('web.core');
    var FieldFloat = core.form_widget_registry.get('float');
    var PercentWidget = FieldFloat.extend({
        template: 'PercentWidget',

        render_value: function () {
            var r_value = this.format_value(this.get('value'), ''), s_value;
            s_value = (r_value * 100).toFixed(2) + '%';
            if (this.$input) {
                this.$input.val(r_value);
            } else {
                this.$el.text(s_value);
            }
        }
    });
    core.form_widget_registry.add('percent', PercentWidget);

    var Column = core.list_widget_registry.get('field');
    var ColumnPercent = Column.extend({
        format: function (row_data, options) {
            var value = this._super.apply(this, arguments);
            if (isNaN(value)) {
                return null;
            }
            return (value * 100).toFixed(2) + '%';
        }
    });
    core.list_widget_registry.add('field.percent', ColumnPercent)

});

static/xml/widget.xml

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">
   <t t-name="PercentWidget" t-extend="FieldChar"/>
</templates>