Skip to content

International Currencies Formatting - Dinamic onkeyup changes on input field and more...

Notifications You must be signed in to change notification settings

izanoth/frontend-utils

Repository files navigation

Formatter

Author: Ivan Cilento


Useful input field renderizing for broad purposes

Example


Usage:

var element = Formatter(form-element)

The input will be rendered as a child node.

Quick Start

import Formatter from './src/formatter.js';
import $ from 'jquery';

$(document).ready(function () {
    const formatter = new Formatter($('#form'));
    var inputIntCurr = formatter.create();
    inputIntCurr.attr('class', 'myclass');
    formatter.renderInt(inputIntCurr);
});

Which will be rendered inside of #form element as a child.


Methods

create()

Returns a input element as JQuey object.

renderInt()

Renders an input field for comercial purposes, masked for all sort of currencies formats.

For development:
renderInt() method has an asynchronous calling.
You should to targets the NPM proxy to your php server in vite.config.js

server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
}

The element created with renderInp()'s method has the following set of attributes:
name = 'amount';
id = 'amount';

Don't customize it for usage.

renderPhone()

Renders an input field. Usage:

import Formatter from './src/formatter.js';
import $ from 'jquery';

$(document).ready(function () {
    const formatter = new Formatter($('#form'));
    var inputPhone = formatter.create();
    formatter.renderPhone(inputPhone, '(00) 0000-0000');
});

The elements created with renderPhone()'s method has the following set of attributes bu default:
name = 'phone';
id = 'phone';

Don't customize it for usage.

renderCpf()

Renders a convenient input field with frontend CPF validation.

Event

Quick start

new EventIn($('#button'));

Methods

infoup()

infoup() has the color()'s method nested
var btn = new EventIn($('#button'));
btn.infoup(content).color('#11cc11');

where content must be the path of a html file as source of the content.

Bug reports: [email protected]

About

International Currencies Formatting - Dinamic onkeyup changes on input field and more...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published