Adjust width of input field to its input

by

In modern browser versions, CSS unit ch is also available. To my understanding, it is font-independent unit, where 1ch equals to width of character 0 (zero) in any given font.

Thus, something as simple as following could be used as resize function:

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>

That example would resize “elem” to length of the value + 2 characters extra.

One potential problem with the unit ch is that in many fonts (i.e. Helvetica) the width of the character “m” exceeds the width of the character 0 and the character “i” is much narrower. 1ch is usually wider than the average character width, usually by around 20-30% according to this post.

More Related Contents:

  1. Get the longest text in HTML document using Jquery or javascript
  2. Set cookie and get cookie with JavaScript [duplicate]
  3. How do you read CSS rule values with JavaScript?
  4. Check if an element contains a class in JavaScript?
  5. Changing CSS Values with Javascript
  6. Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself)
  7. Add a tooltip to a div
  8. Changing nav-bar color after scrolling?
  9. Text-overflow ellipsis on left side
  10. How to change CSS :root color variables in JavaScript
  11. How to change style of iframe content cross-domain?
  12. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  13. How to print HTML content on click of a button, but not the page? [duplicate]
  14. Can I apply CSS to the elements within an iframe?
  15. Save a pre element as PDF with CSS
  16. Center flex item in container, when surrounded by other flex items
  17. Change the style of :before and :after pseudo-elements? [duplicate]
  18. How to create checkbox inside dropdown?
  19. Javascript-Setting background image of a DIV via a function and function parameter
  20. Remove scrollbar but not scrolling functionality [duplicate]
  21. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  22. fade effect using javascript no jquery?
  23. Rotate div text after clicking on button using jquery and css
  24. How to use pagination on HTML tables?
  25. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  26. How to access css properties in javascript when applied via external CSS file?
  27. How to get element by class name
  28. Split text into pages and present separately (HTML5)
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment