Dynamic input width

This has been discussed and solved before in Stackoverflow.

Let's have a look at following form which seems to have 3 input fields: inp1, inp2 and inp3.

Well actually not all of them are text input fields. If you submit this form, only inp1 and inp3 got through. The inp2 is actually a contenteditable element; it will not get through submission. One good thing about this kind of element is that it adjusts its width to its content width (try to type something to englarge / lengthen inp2 value or delete some characters and its width will automatically adjust).

The inp1 is just a regular input field of type text. The only problem with it is that -- unlike inp2 -- it doesn't have capability to adjust its width to its own changing value / content. There's currently no way to CSS style it to have this dynamic width behavior.

So the only solution is to use javascript to catch input changing value event and adjust it. And inp3 performs this quite well. See following script:

	document.querySelector('input[name="inp3"]').addEventListener('input', function(){
		this.style.width = this.value.length + 'ch';
	}, false);

Comments

Please note though that inp3 width won't respond if changes were made through javascript scripting. It only responds to "input" events made with input keyboard and mouse etc.

hendrasmokingscript.com2019-12-18

There's also a bug if instead of numbers, alphabets were used.

Try typing same sentence: "the rain in spain stays mainly in plain" for inp2 and inp3,
and you'll see blanks to the right of inp3.

I guess the "ch" unit isn't as great as many have said.

hendrasmokingscript.com2019-12-24