h5bp/mobile-boilerplate

Autogrow does not trigger on paste

Closed this issue · 4 comments

The current event listener for keyup/onkeyup does not trigger an autogrow() when copy/pasting with a mouse.

I know this is mobile boilerplate but I am building a responsive site so it's important to have everything work on keyboards & touchscreens.

Please read this: http://www.greywyvern.com/?post=282

and consider changing this line of the MBP.autogrow:
element.addEventListener ? element.addEventListener('keyup', handler, false) : element.attachEvent('onkeyup', handler);

to:
element.addEventListener ? element.addEventListener('input', handler, false) : element.attachEvent('onpropertychange', handler);

which seems to work great on any changes to the input

thanks!

Sounds good - assuming support for the input event is decent on mobile browsers? Anyone know of any info on this?

I know this is mobile boilerplate but I am building a responsive site so it's important to have everything work on keyboards & touchscreens.

FYI: This project is specifically a template for building mobile web apps. If you're building a responsive web site, then something like HTML5 Boilerplate is going to be a better starting point. And you'd probably want to use a dedicated plugin for this effect, e.g., https://github.com/alexbardas/jQuery.fn.autoResize

I've given this a quick test and the above change works well when pasting via a mobile browser (tested on iOS simulator), as a typical touch-based copy/paste context menu works in a similar way.

This could be a good user experience improvement i think, but I'll need to test on more mobile devices.

Found time for some Android device tests - autogrow triggered on paste works on both 2.3 and 4.x using this technique. I'll see to adding this change shortly, unless anyone else can find a problem?