Streaming live at 10am (PST)

Auto-expanding form text area?


#1

Heyah,

I would like a form text area to automatically get "taller" the more lines someone types into it.

Currently, the one I am working with goes into "scroll" mode instead.

Here you can see it live: http://wishdish.webflow.io/share

And here's my public link: https://preview.webflow.com/preview/wishdish?preview=c33ed8b016e396b492c1d2e70a81a5f0

Many thanks,
Christopher


#3

Are auto-expanding form text areas possible?


#4

Hi!
I found and tested this script. You can paste it into the custom code or in a separate js-file. Appoint id for text area and paste it in the script.

function flexibleTextarea(){
	var _txt = document.getElementById('comment'); // comment is id of text area, that you want to expand
	var _minRows = 7; // height of field (number of rows)

	if (_txt) {
		function setRows() {
			_txt.rows = _minRows;
			do {
				if (_txt.clientHeight != _txt.scrollHeight) _txt.rows += 1;
			} while (_txt.clientHeight < _txt.scrollHeight);
		}
		setRows();
		_txt.rows = _minRows;

		_txt.onkeyup = function(){
			setRows();
		}
	}
}
if (window.addEventListener)
	window.addEventListener("load", flexibleTextarea, false);
else if (window.attachEvent)
	window.attachEvent("onload", flexibleTextarea);

#5

Hm, interesting! I doesn't work for me though... :confused:


#6

http://ekaterinas-top-notch-site.webflow.io/


#7

It didn't work for me either... hmm. Where on webflow are you inserting the code, Eka? And what exact name do I appoint to my text area?


#8

see http://prntscr.com/9z1cdo


#9

Hi @Eka,
You probably misunderstood the original request. Christopher wants that the text area keeps expanding while user adding the text there


#10

Oooops, my apology! Seems it works on test example. Just figured out that text area will expand after press "Enter"


#11

Allright, cool! :smile:

One that automatically expands is cooler...like this one:
Like this form: http://www.fhoke.com/contact/


#12

Holy crap was that built in Webflow? Beautiful form!


#13

Naah, don't think so but its a nice effect! :smile:


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.