Dependency-free JavaScript class to set an input's width based on its content
npm install input-autowidth
import InputAutoWidth from 'input-autowidth';
new InputAutoWidth(document.getElementById('username'), {
cache: false, // boolean
minWidth: null, // number
maxWidth: null // number
});
The returned class instance has the following properties and methods:
{
/**
* @description input element the autowidth was bound to
*/
input: Element;
/**
* @description current options
*/
options: Object | undefined;
/**
* @description current input width
*/
currentWidth: Number;
/**
* @description object of currently cached strings and their corresponding widths
*/
cache: Object;
/**
* @description event handler bound to the blur, input, keyup, and keydown events on the input
* stored to enable removing the event listeners
*/
eventHandler: Function;
/**
* @description measure string method
* @param {String} str
* @returns {Number}
*/
measureString: Function;
/**
* @description trigger a check on the original element
*/
trigger: Function;
/**
* @description destroy the instance and unbind events - input width will remain set however
*/
destroy: Function;
}