Last active
October 8, 2020 12:00
-
-
Save grace-snow/ab0ca1698ec8c975af6a2493694554f1 to your computer and use it in GitHub Desktop.
A callback function to make text/number inputs resizable to their content. Remember, ch units are the width of 0 in a font, so this is not entirely accurate for small characters like decimal points or the number `1`.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/************************************** | |
* Make any inputs resizable to their content | |
*/ | |
function resizeInput() { | |
this.style.width = this.value.length + "ch"; | |
this.style.minWidth = "1ch"; | |
} | |
function makeInputsResizeble(){ | |
var resizableInputs = document.querySelectorAll('.js-input-resize'); // get all resizable inputs (nodelist) | |
for (var i = 0, length = resizableInputs.length; i < length; i++) { | |
var item = resizableInputs[i]; // get individual inputs | |
item.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event | |
item.addEventListener('focusout', resizeInput); | |
resizeInput.call(item); | |
} | |
} | |
makeInputsResizeble(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment