css animation causes submit button to be missed
# February 26, 2013 at 2:35 am
I have a form on a site with multiple text areas (maybe a dozen) for responses to different categories. To save vertical space, I use CSS to collapse the text areas to one row, and then when that text area receives focus it expands to 240px.
At the bottom of the page, when the user clicks the submit button, if one of the areas are ‘open’ then the loss of focus collapses the text area (as it should) and the submit button is not actioned.
I have a cut down example http://codepen.io/anon/pen/fecLI
You can press the submit button at the top of the page and it works every time. The button at the bottom of the page only works when the text area is collapsed, presumably because the text area is collapsed first, and then the click acts on the page and not the button that was in that position previously?
I have to admit being lazy, I have only tested this issue on Chrome for OSX.
I’m sure I could code a similar (and working) effect with jquery, but I wondered of there is a CSS only solution?
Any suggestions please?# February 26, 2013 at 6:00 am
This reply has been reported for inappropriate content.
It’s definitely because of the transition, which starts to run on mousedown (on the submit button) and the button click fires on mouseup. So if between mousedown and mouseup the submit button moves from under the mouse it fails.
The problem described in Chris’s latest video is related: http://css-tricks.com/video-screencasts/123-if-it-moves-when-you-click-make-something-stick/#more-21048 – ie, the ‘click’ only takes place on mouseup and if the target is no longer under the pointer then the click does not have the desired outcome.
You must be logged in to reply to this topic.