You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Ilya Obshadko <il...@gmail.com> on 2014/04/17 14:14:35 UTC
form submit on pressing Enter inside a TextField
I have an interesting question: what happens exactly when user presses
Enter inside a TextField?
Currently I see that form submit works as if it was triggered by the first
available Submit element (in order those elements appear in the form). I
don't think this is correct, but I don't have any idea (yet) how to handle
it otherwise.
Any thoughts?
--
Ilya Obshadko
Re: form submit on pressing Enter inside a TextField
Posted by Ilya Obshadko <il...@gmail.com>.
The best solution I could come up with is a form mixin that intercepts
keypress event and triggers submit via specified submit element.
It's actually fairly simple:
public class OnEnter {
@Parameter(required=true,defaultPrefix=BindingConstants.LITERAL)
private String submitElement;
@Inject
private JavaScriptSupport javaScriptSupport;
@InjectContainer
private Form form;
void afterRender () {
JSONObject params = new JSONObject ();
params.put ( "formId", form.getClientId () );
params.put ( "submitId", submitElement );
javaScriptSupport.addInitializerCall ( "onEnterHandler", params );
}
}
Tapestry.Initializer.onEnterHandler = function(spec) {
jQuery(document).ready(function() {
jQuery('#' + spec.formId).bind('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
jQuery('#' + spec.submitId).click();
return false;
}
});
});
};
It's possible to extend it further, to make Enter handling more selective.
On Sun, Apr 20, 2014 at 9:20 PM, Ilya Obshadko <il...@gmail.com>wrote:
> I've tested "submit-on-enter" behavior and it turns out that different
> browsers handle this in completely different manner. I've tried Safari,
> Chrome and Firefox (latest versions available) on Mac OS X.
>
> The scenario included a form with hidden submit as its first child element.
>
> - Firefox acts as expected (that is, hidden submit is 'clicked' and thus
> generates appropriate onSelected event)
> - Chrome doesn't handle Enter at all (so form is not submitted after
> pressing Enter in any text field)
> - Safari submits the form, but ignores hidden submit field, so onSelected
> is triggered on first visible submit
>
> I'm a little bit confused about this. Probably that's possible to create a
> workaround using t:submit hidden field, but it's not completely clear for
> me how this field is processed.
>
>
>
> On Fri, Apr 18, 2014 at 7:50 AM, Ilya Obshadko <il...@gmail.com>wrote:
>
>> Thanks Howard! That's probably keyDown/keyPressed events and it might be
>> a little bit complicated when the same textfield acts as a base control for
>> AutoComplete (of any kind). I'll do some research, too.
>>
>>
>> On Fri, Apr 18, 2014 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com>wrote:
>>
>>> That's standard HTML browser behavior; when you hit enter in a text
>>> field,
>>> is searches forward for a submit and clicks it. You can perhaps address
>>> this by putting an event handler on the text field itself. I'd have to
>>> do
>>> experimentation/research to find the correct event.
>>>
>>>
>>> On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mgentry@masslight.net
>>> >wrote:
>>>
>>> > Hi Ilya,
>>> >
>>> > As far as I know, this is standard browser/form behavior, regardless
>>> of the
>>> > web framework you are using (Tapestry, PHP, etc). You can use
>>> JavaScript
>>> > to change the behavior or CSS to do tricky things, like move the
>>> positions
>>> > of the submit buttons when they render so that the one you want to
>>> submit
>>> > on Enter is first in the DOM, but can be elsewhere on the screen.
>>> >
>>> > mrg
>>> >
>>> >
>>> >
>>> > On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <
>>> ilya.obshadko@gmail.com
>>> > >wrote:
>>> >
>>> > > I have an interesting question: what happens exactly when user
>>> presses
>>> > > Enter inside a TextField?
>>> > >
>>> > > Currently I see that form submit works as if it was triggered by the
>>> > first
>>> > > available Submit element (in order those elements appear in the
>>> form). I
>>> > > don't think this is correct, but I don't have any idea (yet) how to
>>> > handle
>>> > > it otherwise.
>>> > >
>>> > > Any thoughts?
>>> > >
>>> > >
>>> > > --
>>> > > Ilya Obshadko
>>> > >
>>> >
>>>
>>>
>>>
>>> --
>>> Howard M. Lewis Ship
>>>
>>> Creator of Apache Tapestry
>>>
>>> The source for Tapestry training, mentoring and support. Contact me to
>>> learn how I can get you up and productive in Tapestry fast!
>>>
>>> (971) 678-5210
>>> http://howardlewisship.com
>>> @hlship
>>>
>>
>>
>>
>> --
>> Ilya Obshadko
>>
>>
>
>
> --
> Ilya Obshadko
>
>
--
Ilya Obshadko
Re: form submit on pressing Enter inside a TextField
Posted by Geoff Callender <ge...@gmail.com>.
Alternatively, use Submit for your default submit, and LinkSubmit for all other submits. You can style them to all look like buttons, eg. with Bootstrap:
<t:linksubmit t:id="cancel" mode="cancel" class="btn btn-default">Cancel</t:linksubmit>
<t:submit value="Save" class="btn btn-primary"/>
If you're using T5.4, you don't need to specify the class for Submit unless you want something different than class="btn btn-primary".
On 21/04/2014, at 11:38 AM, Geoff Callender wrote:
> Try this as your first button.
>
> <t:submit t:id="defaultSubmit" class="my-hidden-submit" />
>
> .my-hidden-submit {
> position: absolute;
> left: -100%;
> tabindex: -1;
> }
>
> On 20/04/2014, at 8:20 PM, Ilya Obshadko wrote:
>
>> I've tested "submit-on-enter" behavior and it turns out that different
>> browsers handle this in completely different manner. I've tried Safari,
>> Chrome and Firefox (latest versions available) on Mac OS X.
>>
>> The scenario included a form with hidden submit as its first child element.
>>
>> - Firefox acts as expected (that is, hidden submit is 'clicked' and thus
>> generates appropriate onSelected event)
>> - Chrome doesn't handle Enter at all (so form is not submitted after
>> pressing Enter in any text field)
>> - Safari submits the form, but ignores hidden submit field, so onSelected
>> is triggered on first visible submit
>>
>> I'm a little bit confused about this. Probably that's possible to create a
>> workaround using t:submit hidden field, but it's not completely clear for
>> me how this field is processed.
>>
>>
>>
>> On Fri, Apr 18, 2014 at 7:50 AM, Ilya Obshadko <il...@gmail.com>wrote:
>>
>>> Thanks Howard! That's probably keyDown/keyPressed events and it might be a
>>> little bit complicated when the same textfield acts as a base control for
>>> AutoComplete (of any kind). I'll do some research, too.
>>>
>>>
>>> On Fri, Apr 18, 2014 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com>wrote:
>>>
>>>> That's standard HTML browser behavior; when you hit enter in a text field,
>>>> is searches forward for a submit and clicks it. You can perhaps address
>>>> this by putting an event handler on the text field itself. I'd have to do
>>>> experimentation/research to find the correct event.
>>>>
>>>>
>>>> On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mgentry@masslight.net
>>>>> wrote:
>>>>
>>>>> Hi Ilya,
>>>>>
>>>>> As far as I know, this is standard browser/form behavior, regardless of
>>>> the
>>>>> web framework you are using (Tapestry, PHP, etc). You can use
>>>> JavaScript
>>>>> to change the behavior or CSS to do tricky things, like move the
>>>> positions
>>>>> of the submit buttons when they render so that the one you want to
>>>> submit
>>>>> on Enter is first in the DOM, but can be elsewhere on the screen.
>>>>>
>>>>> mrg
>>>>>
>>>>>
>>>>>
>>>>> On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <ilya.obshadko@gmail.com
>>>>>> wrote:
>>>>>
>>>>>> I have an interesting question: what happens exactly when user presses
>>>>>> Enter inside a TextField?
>>>>>>
>>>>>> Currently I see that form submit works as if it was triggered by the
>>>>> first
>>>>>> available Submit element (in order those elements appear in the
>>>> form). I
>>>>>> don't think this is correct, but I don't have any idea (yet) how to
>>>>> handle
>>>>>> it otherwise.
>>>>>>
>>>>>> Any thoughts?
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Ilya Obshadko
>>>>>>
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Howard M. Lewis Ship
>>>>
>>>> Creator of Apache Tapestry
>>>>
>>>> The source for Tapestry training, mentoring and support. Contact me to
>>>> learn how I can get you up and productive in Tapestry fast!
>>>>
>>>> (971) 678-5210
>>>> http://howardlewisship.com
>>>> @hlship
>>>>
>>>
>>>
>>>
>>> --
>>> Ilya Obshadko
>>>
>>>
>>
>>
>> --
>> Ilya Obshadko
>
Re: form submit on pressing Enter inside a TextField
Posted by Geoff Callender <ge...@gmail.com>.
Try this as your first button.
<t:submit t:id="defaultSubmit" class="my-hidden-submit" />
.my-hidden-submit {
position: absolute;
left: -100%;
tabindex: -1;
}
On 20/04/2014, at 8:20 PM, Ilya Obshadko wrote:
> I've tested "submit-on-enter" behavior and it turns out that different
> browsers handle this in completely different manner. I've tried Safari,
> Chrome and Firefox (latest versions available) on Mac OS X.
>
> The scenario included a form with hidden submit as its first child element.
>
> - Firefox acts as expected (that is, hidden submit is 'clicked' and thus
> generates appropriate onSelected event)
> - Chrome doesn't handle Enter at all (so form is not submitted after
> pressing Enter in any text field)
> - Safari submits the form, but ignores hidden submit field, so onSelected
> is triggered on first visible submit
>
> I'm a little bit confused about this. Probably that's possible to create a
> workaround using t:submit hidden field, but it's not completely clear for
> me how this field is processed.
>
>
>
> On Fri, Apr 18, 2014 at 7:50 AM, Ilya Obshadko <il...@gmail.com>wrote:
>
>> Thanks Howard! That's probably keyDown/keyPressed events and it might be a
>> little bit complicated when the same textfield acts as a base control for
>> AutoComplete (of any kind). I'll do some research, too.
>>
>>
>> On Fri, Apr 18, 2014 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com>wrote:
>>
>>> That's standard HTML browser behavior; when you hit enter in a text field,
>>> is searches forward for a submit and clicks it. You can perhaps address
>>> this by putting an event handler on the text field itself. I'd have to do
>>> experimentation/research to find the correct event.
>>>
>>>
>>> On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mgentry@masslight.net
>>>> wrote:
>>>
>>>> Hi Ilya,
>>>>
>>>> As far as I know, this is standard browser/form behavior, regardless of
>>> the
>>>> web framework you are using (Tapestry, PHP, etc). You can use
>>> JavaScript
>>>> to change the behavior or CSS to do tricky things, like move the
>>> positions
>>>> of the submit buttons when they render so that the one you want to
>>> submit
>>>> on Enter is first in the DOM, but can be elsewhere on the screen.
>>>>
>>>> mrg
>>>>
>>>>
>>>>
>>>> On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <ilya.obshadko@gmail.com
>>>>> wrote:
>>>>
>>>>> I have an interesting question: what happens exactly when user presses
>>>>> Enter inside a TextField?
>>>>>
>>>>> Currently I see that form submit works as if it was triggered by the
>>>> first
>>>>> available Submit element (in order those elements appear in the
>>> form). I
>>>>> don't think this is correct, but I don't have any idea (yet) how to
>>>> handle
>>>>> it otherwise.
>>>>>
>>>>> Any thoughts?
>>>>>
>>>>>
>>>>> --
>>>>> Ilya Obshadko
>>>>>
>>>>
>>>
>>>
>>>
>>> --
>>> Howard M. Lewis Ship
>>>
>>> Creator of Apache Tapestry
>>>
>>> The source for Tapestry training, mentoring and support. Contact me to
>>> learn how I can get you up and productive in Tapestry fast!
>>>
>>> (971) 678-5210
>>> http://howardlewisship.com
>>> @hlship
>>>
>>
>>
>>
>> --
>> Ilya Obshadko
>>
>>
>
>
> --
> Ilya Obshadko
Re: form submit on pressing Enter inside a TextField
Posted by Ilya Obshadko <il...@gmail.com>.
I've tested "submit-on-enter" behavior and it turns out that different
browsers handle this in completely different manner. I've tried Safari,
Chrome and Firefox (latest versions available) on Mac OS X.
The scenario included a form with hidden submit as its first child element.
- Firefox acts as expected (that is, hidden submit is 'clicked' and thus
generates appropriate onSelected event)
- Chrome doesn't handle Enter at all (so form is not submitted after
pressing Enter in any text field)
- Safari submits the form, but ignores hidden submit field, so onSelected
is triggered on first visible submit
I'm a little bit confused about this. Probably that's possible to create a
workaround using t:submit hidden field, but it's not completely clear for
me how this field is processed.
On Fri, Apr 18, 2014 at 7:50 AM, Ilya Obshadko <il...@gmail.com>wrote:
> Thanks Howard! That's probably keyDown/keyPressed events and it might be a
> little bit complicated when the same textfield acts as a base control for
> AutoComplete (of any kind). I'll do some research, too.
>
>
> On Fri, Apr 18, 2014 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com>wrote:
>
>> That's standard HTML browser behavior; when you hit enter in a text field,
>> is searches forward for a submit and clicks it. You can perhaps address
>> this by putting an event handler on the text field itself. I'd have to do
>> experimentation/research to find the correct event.
>>
>>
>> On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mgentry@masslight.net
>> >wrote:
>>
>> > Hi Ilya,
>> >
>> > As far as I know, this is standard browser/form behavior, regardless of
>> the
>> > web framework you are using (Tapestry, PHP, etc). You can use
>> JavaScript
>> > to change the behavior or CSS to do tricky things, like move the
>> positions
>> > of the submit buttons when they render so that the one you want to
>> submit
>> > on Enter is first in the DOM, but can be elsewhere on the screen.
>> >
>> > mrg
>> >
>> >
>> >
>> > On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <ilya.obshadko@gmail.com
>> > >wrote:
>> >
>> > > I have an interesting question: what happens exactly when user presses
>> > > Enter inside a TextField?
>> > >
>> > > Currently I see that form submit works as if it was triggered by the
>> > first
>> > > available Submit element (in order those elements appear in the
>> form). I
>> > > don't think this is correct, but I don't have any idea (yet) how to
>> > handle
>> > > it otherwise.
>> > >
>> > > Any thoughts?
>> > >
>> > >
>> > > --
>> > > Ilya Obshadko
>> > >
>> >
>>
>>
>>
>> --
>> Howard M. Lewis Ship
>>
>> Creator of Apache Tapestry
>>
>> The source for Tapestry training, mentoring and support. Contact me to
>> learn how I can get you up and productive in Tapestry fast!
>>
>> (971) 678-5210
>> http://howardlewisship.com
>> @hlship
>>
>
>
>
> --
> Ilya Obshadko
>
>
--
Ilya Obshadko
Re: form submit on pressing Enter inside a TextField
Posted by Ilya Obshadko <il...@gmail.com>.
Thanks Howard! That's probably keyDown/keyPressed events and it might be a
little bit complicated when the same textfield acts as a base control for
AutoComplete (of any kind). I'll do some research, too.
On Fri, Apr 18, 2014 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com> wrote:
> That's standard HTML browser behavior; when you hit enter in a text field,
> is searches forward for a submit and clicks it. You can perhaps address
> this by putting an event handler on the text field itself. I'd have to do
> experimentation/research to find the correct event.
>
>
> On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mgentry@masslight.net
> >wrote:
>
> > Hi Ilya,
> >
> > As far as I know, this is standard browser/form behavior, regardless of
> the
> > web framework you are using (Tapestry, PHP, etc). You can use JavaScript
> > to change the behavior or CSS to do tricky things, like move the
> positions
> > of the submit buttons when they render so that the one you want to submit
> > on Enter is first in the DOM, but can be elsewhere on the screen.
> >
> > mrg
> >
> >
> >
> > On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <ilya.obshadko@gmail.com
> > >wrote:
> >
> > > I have an interesting question: what happens exactly when user presses
> > > Enter inside a TextField?
> > >
> > > Currently I see that form submit works as if it was triggered by the
> > first
> > > available Submit element (in order those elements appear in the form).
> I
> > > don't think this is correct, but I don't have any idea (yet) how to
> > handle
> > > it otherwise.
> > >
> > > Any thoughts?
> > >
> > >
> > > --
> > > Ilya Obshadko
> > >
> >
>
>
>
> --
> Howard M. Lewis Ship
>
> Creator of Apache Tapestry
>
> The source for Tapestry training, mentoring and support. Contact me to
> learn how I can get you up and productive in Tapestry fast!
>
> (971) 678-5210
> http://howardlewisship.com
> @hlship
>
--
Ilya Obshadko
Re: form submit on pressing Enter inside a TextField
Posted by Howard Lewis Ship <hl...@gmail.com>.
That's standard HTML browser behavior; when you hit enter in a text field,
is searches forward for a submit and clicks it. You can perhaps address
this by putting an event handler on the text field itself. I'd have to do
experimentation/research to find the correct event.
On Thu, Apr 17, 2014 at 6:02 AM, Michael Gentry <mg...@masslight.net>wrote:
> Hi Ilya,
>
> As far as I know, this is standard browser/form behavior, regardless of the
> web framework you are using (Tapestry, PHP, etc). You can use JavaScript
> to change the behavior or CSS to do tricky things, like move the positions
> of the submit buttons when they render so that the one you want to submit
> on Enter is first in the DOM, but can be elsewhere on the screen.
>
> mrg
>
>
>
> On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <ilya.obshadko@gmail.com
> >wrote:
>
> > I have an interesting question: what happens exactly when user presses
> > Enter inside a TextField?
> >
> > Currently I see that form submit works as if it was triggered by the
> first
> > available Submit element (in order those elements appear in the form). I
> > don't think this is correct, but I don't have any idea (yet) how to
> handle
> > it otherwise.
> >
> > Any thoughts?
> >
> >
> > --
> > Ilya Obshadko
> >
>
--
Howard M. Lewis Ship
Creator of Apache Tapestry
The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!
(971) 678-5210
http://howardlewisship.com
@hlship
Re: form submit on pressing Enter inside a TextField
Posted by Michael Gentry <mg...@masslight.net>.
Hi Ilya,
As far as I know, this is standard browser/form behavior, regardless of the
web framework you are using (Tapestry, PHP, etc). You can use JavaScript
to change the behavior or CSS to do tricky things, like move the positions
of the submit buttons when they render so that the one you want to submit
on Enter is first in the DOM, but can be elsewhere on the screen.
mrg
On Thu, Apr 17, 2014 at 8:14 AM, Ilya Obshadko <il...@gmail.com>wrote:
> I have an interesting question: what happens exactly when user presses
> Enter inside a TextField?
>
> Currently I see that form submit works as if it was triggered by the first
> available Submit element (in order those elements appear in the form). I
> don't think this is correct, but I don't have any idea (yet) how to handle
> it otherwise.
>
> Any thoughts?
>
>
> --
> Ilya Obshadko
>