You need to sign in to do that
Don't have an account?
JimRae
user hitting enter key on inputfield in tabbed view
I hope someone can help me. I have a VF page that includes 4 tabbed sections. One of them is a custom search tab. When the user types their criteria (an account name) into the inputtext box, and clicks my search button, everything works great. If the user types in their criteria, then presses "Enter", the page refreshes and takes the user back to the first tab (my search tab is the fourth tab).
How can I get pressing enter to be the same as clicking the button?
Thanks in advance!!
Jim
How can I get pressing enter to be the same as clicking the button?
Thanks in advance!!
Jim
Found an interesting thing:
When the commandButton has reRender attribute associated with it, it is rendered with type="button" in html. Else it is rendered as type="submit". With submit, the enter key works fine; not with button.
Now if I have to make my enter key work, I have to remove rerender. This reloads the whole page and since my page has got images, the reload takes time and doesn't looks good. I need the reRender and also have to use the enter key. I tried by capturing the enter key event and clicking the button using Javascript. It executes the Action method but doesn't rerenders anything.
Is there any solution for this?
All Answers
Of course the easiest thing is to just make it the first button in your list :)
Message Edited by jwetzler on 08-27-2008 01:57 PM
Jill (or anyone),
Any other ideas on this?
I have been working with creating a javascript function that fires onkeypress that checks for the enter keycode ("13") then fires the click() function of my button, but it still seems to rerender the entire page and takes me to a different tab, wiping out my results.
Any help would be greatly appreciated. I know there must be a way to do this!
Jim
I am having a very similar issue.
In my case I start with a page with a single search button. So the first time I hit return, the search perfoms correctly and displays a new section of the page with some additional buttons. if the person then changes the search and hits return, one of these other additional buttons seemingly has gotten focus, and takes control of the "return" press event!
I have tried many things, like putting javascript in to capture a return event on the text input box, however the submit on the button that gets focus seems to take precedence, and forces out my event.
The question is, what is forcing these secondary buttons to get focus? Is it javascript in the page, or browser default behaviour??
OK, so I figured out the issue that I was having.
My Search button had it's rerender tag set. This means that the button is actually output in HTML with the attribute type="button"
My secondary buttons that appeared after the search had now rerender tag set, which means that this button is output in HTML with the attribute type="submit"
When I hit return for the second time, the browser was assuming that I was submitting the form, and automatically choosing the first submit button it could find and acting like it had been clicked.
By putting in a rerender attribute on these secondary buttons, and having a javascript function listening for a return keystroke I am now able to search multiple times by clicking return.
Hope this helps someone, although I'm not sure it will help the original problem in this thread.
What does your javascript enter key listener look like? Maybe I have mine coded wrong.
Jim
The javascript looks like:
and on my input text field I have an onkeyup event handler:
Which is fairly standard code. With your tabs, I would have a look at the HTML that is output to the browser and search that HTML for a input element of type submit. It could be that there is a submit input element on one of the tabs which is hidden via CSS, but is still picking up the user hitting the return button and causing a complete form submit to happen, which would probably give the behaviour that you are experiencing.
Where you able to get this working? I have basically copied the javascript that Davser posted but as soon as I hit Enter key the cancel button button is getting executed, not the search.
I even removed all of the fields so that only a inputText and commandButton remain. If I type and hit enter it refreshes the entire page rather then just performing the rerender.
Thanks for the help but I'm done burning cycles on this one. The users will just have to learn to click the search button rather than hit enter.
Does it make a difference if you have only one Search button on the page or does that refresh the entire page when hitting Enter as well?
I got my page working yesterday, but I only have one button.
If you think that could help I'll post a simplified version of my page here.
Regards
//Johan Liljegren
I ended up moving the search function to the first tab to get it to work.
Hi Johan.
I'm having the same Enter key problem, but only have a single text input and a single button on the page. I've tried adding the hidden field, and have also tried the Javascript solution, but cannot get either working. Could you post your simplified code?
Thanks in advance.
-Greg
Found an interesting thing:
When the commandButton has reRender attribute associated with it, it is rendered with type="button" in html. Else it is rendered as type="submit". With submit, the enter key works fine; not with button.
Now if I have to make my enter key work, I have to remove rerender. This reloads the whole page and since my page has got images, the reload takes time and doesn't looks good. I need the reRender and also have to use the enter key. I tried by capturing the enter key event and clicking the button using Javascript. It executes the Action method but doesn't rerenders anything.
Is there any solution for this?
for what - getting the enter key hit? i made a inputtext field working on enter hit instead of pushing a button.
<script type="text/javascript"> window.captureEvents(Event.KEYPRESS); window.onkeypress = Ausgabe; function Ausgabe(Ereignis) { if(Ereignis.which == 13){ SonE(); } } </script> <apex:actionFunction action="{!ViewData}" name="SonE"></apex:actionFunction>
the javascript looks for enter key and starts an action function ... (which does the same as the button - doing a pagereference action. tried that already?
Hi all,
For me the JohannesBorrman code works perfect. In my VisualForce page, I have 3 commandButtons.
But just one have to rerender the pageBlock. I do some research on the web.
And it appears that a commandButton with a rerender has the type="Button"
and a commandButton with no rerender has the type="Submit".
So if you want that the JohannesBorrman code work, you need to specify the rerender on all you 're commandButtons.
P.S. : I change a little bit the code to not use a lot of javascript function. Here is an example of my code :
<apex:form id="formId"> <script type="text/javascript"> function handleKeyPressSearch(event){ if (event.which == 13){ actionSearchScript(); } } </script>
<apex:actionFunction action="{!actionSearch}" name="actionSearchScript" />
<apex:pageMessages id="errorMessages"/>
<!--
...
-->
<apex:inputText value="{!searchStr}" id="idSearch" onkeypress="handleKeyPressSearch(event);"/> <apex:commandButton action="{!actionSearch}" value="{!$Label.searchButton}" reRender="PgBTableListId, errorMessages" id="commandButtonSearchId"/> <!-- ... --> </apex:form>
I skip the page presentation for more visibilty.
Sorry, I write too quickly. It's not working on IE 7.
Any ideas why?
<script type="text/javascript"> function catchEnterKey(eVnt) { if (!eVnt) eVnt = window.event; doSrch(); } document.onkeyup = catchEnterKey; </script>
This should do it - had no IE7 though but recognized it didn't work with IE6 too.
I found how correct the problem. Here is my code
<script type="text/javascript"> function handleKeyPressSearch(event){ var keyCode; if (event && event.which){ // Use for Firefox and Chrome keyCode = event.which; } else { // Use for IE keyCode = event.keyCode; } if (keyCode == 13){ actionSearchScript(); } } </script>
To avoid the Enter keypress from having other effects (like re-rendering the entire page),
I found I had to clear the keyCode before returning
Thusly:
if (keyCode == 13){ actionSearchScript(); event.keyCode = null; }
Combining everything people have said worked for me in all major browsers. Here it is.
<script type= "text/javascript">
function handleKeyPressSearch(event){
var keyCode;
if (event && event.which){
// Use for Firefox and Chrome
keyCode = event.which;
} else {
// Use for IE
keyCode = event.keyCode;
}
if (keyCode == 13){
actionSearchScript();
event.keyCode = null;
}
}
</script>
<
<
I am having a similar issue, but my isn't in a 'tabbed' view and I am using a commandLink instead of a button. I tried the above suggestions and even a jQuery version:
But it still refreshes the page and puts '?core.apexpages.devmode.url=1' in the URL.... I have tried removing the reRender and changing the link to a button, but still nothing seems to work.
Here is my code:
Help would be appreciated!
Setting
event.keyCode = null;
gave me an issue in Firefox. Firebug reported that only a getter is supported for this property. In my case, I changed this to;
event.preventDefault();
So i got it to work with a regular <apex:commandButton & <apex:inputTex:
And then some jQuery to make it all go