This is driving me crazy and I can't find the answer anywhere.
I have forms in my phonegap app. If the input type="text", the text keyboard pops up and "go" is displayed in the corner. When you click go, it submits the form. That all works as I would expect. But if I use input type="number", the number keyboard pops up and "next" is displayed in the corner. When you click next, if there is another input box before the button tag, it goes to that input. That's okay. . . not ideal, but makes sense. But if it is the last input field on the page, click "next" does nothing. It doesn't put focus on the button (even with tabindex) and it doesn't submit the form (ideal).
I'm using phonegap 1.3.0 and jquery 1.7 if any of that helps.
You can detect the next keyboard press by using the following bind in JQuery:
$('input').on('keydown', function(e){
if(e.which === 9) {
//your code here
}
});
The 'next' button emulates the tab keypress event on a keyboard, which is key code 9. Unfortunately, keypress and keyup events do not detect the next key event, so you need to bind it on keydown.
Hope that helps!
Okay, now I do have something that looks like an answer and quacks like an answer.
It's a horrible hack, and I am experiencing some side-effects at this point, but it's a small leap for mankind anyway.
Add an invisible text input to your form, which automatically submits the form as soon as it receives focus. Since it can only receive focus from the user pressing 'Next' or tabbing from the last number field, there should be a pretty solid logic in the user sequence.
<input type='text' style="opacity:0;" onfocus="javascript:$('#thisForm').submit();">
The side effects are:
the hidden form field will briefly be visible. You can avoid this by
using the onfocus handler to also re-focus on the number field that
was just left. Or you can set the width of the input to 0. The latter works best for me.
if you're using jQueryMobile like me, you're inviting horrible page transition ugliness on yourself, so if your form is in a dialog and submitting the form closes the dialog, be sure to set the dialog transition (when it is being opened from a previous screen) to 'none'.
Related
Playground example: https://play.nativescript.org/?template=play-vue&id=FZ3GR1&v=4
I'm using Nativescript-Vue on an Android device, if you type a value into the first textfield and then press enter, focus is moved to the second textfield.
How do I stop this? I do not want the focus to change at all as I will be handling the Enter keypress. I can move the focus back but I would rather it didn't move at all.
I feel I'm missing something very obvious!?
Nativescript's TextField has a property called returnKeyType that sets the soft keyboard's return type. You can set it to done if you want to just close the keyboard.
<TextField returnKeyType="done"></TextField>
More information about that in the docs
There is no GO button on the numeric keyboard. Not sure why… For input type="tel", I'd like the NEXT button to just submit the form, so that I can attach functions to the submit event (smooth scrolling to the next form section). Instead it tabs straight to the next field (sometimes skipping sections).
I know I can attach functions to the blur event, but these fire after the tabbing takes place. So it ruins the smooth scroll.
e.preventDefault didn't stop the tabbing behaviour. Any ideas?
Phonegap input type text show Go button on soft keyboard, I have multiple text boxes so want Next button on keyboard so user can move easily and on last input want Go so user can press to submit form.
And on Android kitkatt keyboard top bar also not displaying Next|Prev buttons.
Having a "Next" button instead of "Go" for input type="text" would not be possible with Android as of now.
Android will always display "Go" button for form input fields irrespective of the position of the field you are at in the form. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard.
There are two possible hacks to come closer to what you need (still won't change "Go" to "Next" but will help "Go" act as "Next") -
Hack 1 - Hijack Enter key event & move focus to next fields
Like I mentioned the "Go" key replicates the "Enter" key, you can capture the enter key event using JavaScript & make it move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.
I have answered a solution to a similar requirement here - How to trigger a Tab when user presses Enter, you can try implementing the same in your app.
DEMO LINK - http://codepen.io/nitishdhar/pen/Gxbhm
Hack 2 - Force form validation & move focus to next invalid fields
If you want to prevent users from submitting the form, you can put required validations on the form using java-script & if some field is not filled, upon pressing "Go" the focus of the cursor can be brought to the next "not filled" field. So in a way giving the impression of - "Pressing Go & moving to next field to be filled"
Try this plugin - http://jqueryvalidation.org/ this behaves in the way explained i.e moves focus to the next required or invalid field.
Also I think some android versions show some tab key on the keyboard to move between fields, buts its not Next.
All the best.
Most of the time (but not always), when I finish typing in a or and the soft keyboard hides, the view area is left raised with a black space on the bottom. Clicking, tilting or otherwise engaging the phone corrects the screen. However, user's first motion is usually pressing , but if you click submit it jumps down and you actually just click on the text area again. How do you stop this and get the screen to reset after the keyboard closes.
Take a look at you AndroidManifest.xml
http://developer.android.com/guide/topics/manifest/activity-element.html
I think you need to change android:configChanges.
I have the exact same problem what i did was handle hidekeyboard even in javascript and do something like window.scrollTo(0,0) or $("input[type=text],textarea").blur();
This will cause the the screen to get back to normal position
But there is just one problem when click from input field of type = text to a input field password it internally hide the keyboard which causes the hidekeyboard event to fire and scrolls the screen to top. This is the only side effect of this
Let me know if you find the solution for this
I have a webform that is integrated into a native app via a webview. But now when the user sets the focus on the first textbox of the form, I see a Go button on the soft keyboard. Instead, I'd like to have Next button, clicking on which would take me to the next input control. And the last input control alone should have Go button on keyboard. How do I achieve this? (Note: Please note that I want this on a web form. I've already found material on how to do this on a native form.)
Please go to take a look, is that what you are looking for?
How to change the Android softkey keyboard "Go" button to "Next"