I'm using JQuery Mobile within a PhoneGap IOS App. I'm currently successfully capturing the IOS Keyboard return within a search key as follows.
JS
function blah()
{
if(window.event.keyCode == 13 )
{ do something }
}
HTML
<input type="search" id="searchBox" value="" onblur="dothis()" data-inline="true" onKeyPress="blah();" />
I would like to capture the 'Done' key on the keyboard as well. I cant seem to find any information on this.
Thanks.
Unfortunately, pressing the "Done" key does not fire a keyCode event. So, I can't seem to find a way to detect it either.
I think the only option is to detect the "blur" event on your field. If the event occurs, then fire whatever action you need. Of course, this is only useful if you have a single field. If you have more than one field, using "blur" to be the equivalent of "Go" or "Submit" is useless.
Let us know if you found a better workaround.
I've suggested using the blur event in my original answer. However, I think a better idea is simply to listen for the keyboard hiding - which will happen after the "Done" button is pressed.
window.addEventListener('keyboardDidHide', function () {
// Describe your logic which will be run each time keyboard is closed.
});
https://github.com/cjpearson/cordova-plugin-keyboard#keyboarddidhide
Also, be sure the deregister this listener after you've done whatever you need to do after the keyboard hides. Otherwise, it will fire every time the keyboard hides in other parts of your app.
Related
I need to set focus and open keyboard after page loads or modal with input is shown.
Simple .focus() works in Android and also in iPad in landscape mode.
However in portrait mode and on iPhone focus is set but keyboard not shown.
I tried also solution with adding and focusing on additional element, but it doesn't work with Angular. (IOS show keyboard on input focus)
#ViewChild('searchBarInput') searchBarInput: ElementRef;
ngAfterViewInit(): void {
setTimeout(()=> {
this.searchBarInput.nativeElement.focus();
this.searchBarInput.nativeElement.click();
},180);
}
test application:
https://inputfocus.vercel.app/
expectation is that after page is loaded and focus set, user can start typing.
It is simplified version - I need this on modal, but behaviour on iOS is similar
I think I found the solution.
on iOS (iphone) and iPad portrait mode, focus() needs to be triggered by user action.
So we need to set this immediately after use clicks button showing modal or new div with target input field.
We can create this new field automatically, set focus, and remove it after moving focus to target field.
On button click we need to create temporary input, append to existing container (close to our input) and focus on it.
btnClicked() {
this.showModal = true;
this.searchBar = this.renderer2.selectRootElement('#searchBar', true);
// 2nd argument preserves existing content
// setting helper field and focusing on it
this.inputHelper = this.renderer2.createElement('input');
this.renderer2.appendChild(this.searchBar, this.inputHelper);
this.inputHelper.focus();
let event = new KeyboardEvent('touchstart',{'bubbles':true});
this.searchBarButton.nativeElement.dispatchEvent(event);
}
after modal/target input is shown, we move focus and remove temporary one:
initiateKeyboard() {
setTimeout(()=> {
this.searchBarInput.nativeElement.focus();
this.renderer2.removeChild(this.searchBar, this.inputHelper);
},180);
}
and template:
<div id="searchBar">
<input type="button" class="button is-link is-light" value="Search" (click)="btnClicked()" (touchstart)="initiateKeyboard()" #searchBarButton>
</div>
You just need to remember that iPhone may zoom screen, so you need to adjust parameters of temporary input.
working solution: https://inputfocus.vercel.app/
I want to keep the keyboard displayed at the bottom by default without using a text input which the user needs to tap.
I need to keep the keyboard at the bottom at all times.
Then I need to listen to the events of the keyboard.
How can I do this?
The workaround I implemented was adding an invisible text box somewhere on the screen and then set it as focused manually.
Just in case someone else might stumble upon this, OP's self answer works. In order to set focus manually, you'll need to get the ref to the hidden input.
<TextInput
ref={input => (this.textinput = input)}
style={{ display: 'none' }}
/>
then elsewhere in the code, you focus manually by
if (this.textinput) {
this.textinput.focus();
}
This answer is way too late to do the OP any good, but for others:
You can't do this. In iOS, the operating system, keyboards simply don't/can't work this way. iOS never shows a keyboard without an active text input focus, and there is no way for even a native iOS app to override this OS-level behavior. The OS itself prevents this from happening.
I have a website that is optimized to work on iOS devices. But the problem is that the keyboard always says Go as user fills the form. How do I get the keyboard to say Next until the last entry on the form, where it should say Go? Or alternatively, how do I disable the Enter button entirely?
Again, this is a website. It works everywhere websites work: in browsers. Except I have having this particular problem in Safari on mobile devices.
while changing the input type gives you some control of the keyboard layout the return key label in IOS cannot be customized.
Other than changing it to say Search there are no customizations available. You can disable the functionality of the button using something like this injQuery:
$("#myForm input").live("keyup", function(evt) {
if (evt.keyCode === 13) {
$("#myForm").trigger("submit");
}
});
I am using Flash Pro cs6, AS3, Air3.8.. And I am using textfield for input. I am trying to make it so when the user presses "Done" it shifts to the next field. I am finding conflicting information about this on all the forums, including this one. I did search but never found a fix..
I am definitely receiving the events, and I tried adding a line that identifies the keycode, which has confirmed it is receiving keycode 13. I actually made it put the keycode into the field I want the focus to shift to successfully.. It just refuses to put focus on that field..
The code I am using is stated in the docs that it will not work in iOS.. BUT it DOES work further along on the same page of script, as well as on two other ones... I have:
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyhandler);
function keyhandler(event:KeyboardEvent){
if(event.charCode == 13)
{
stage.removeEventListener(KeyboardEvent.KEY_DOWN,keyhandler);
stage.focus = null;
stage.focus = nextTextField;
}
}
I tried that while adding the listener to the text field first, then changed it to the stage, neither work.. I tried "requestsSoftKeyboard" and several other ways I have seen posted that supposedly work in iOS, but they didn't work.. There are other functions that use the same stage.focus to null, followed by stage.focus to MyTextField and they work, but they are initiated by pressing a button on the stage, NOT a button on the soft keyboard. The code there that works is just a standard if statement:
if (TextField == "")
{
stage.focus=null;
stage.focus=TextField;
}else if (NextTextField == "")
{
stage.focus = null;
stage.focus = NextTextField;
}else if (TextFieldAfterThat == "")
{
stage.focus = null;
stage.focus = TextFieldAfterThat;
}
That continues through all fields and always goes to the right one with the soft keyboard open, cursor blinking, and ready to type.. every time. I know the listeners are received from the soft keyboard "Done" because a function to capitalize the words works, and when I added code to confirm the keycode it worked. I also have found access to that value using "charcode" AND "keycode".. I do not know what the difference is, but both returned 13 and neither worked for me..
There is another place I use the same code to make a TextField active and set the focus after the user presses a radio button, and those all work every time.
I am not sure what the difference is coming from pressing "Done" vs. pressing an object on the stage, but it refuses to set the focus with the done button.
Anyone have any ideas or made this work before?
I had success assingning focus to a StageText in iOS like this:
stageText.assignFocus();
StageText offers many advantages over TextField because it shows a native text input. The only disadvantage I know is that you can't use custom fonts.
Here's the documentation, and a tutorial.
I haven't experimented with the "Done" key, but I did what you are trying to achieve with "Enter" key and it worked. Also take note that in iOS the "Done" key is meant to hide the keyboard, so that could be why you are having these problems..
With component FPTextField you can listen to the event click DONE. In this video, compared StageText and FPTextField: http://www.youtube.com/watch?v=BKYaoLtEmCU
Use ane library FPNativeUI: http://flashpress.ru/blog/ane/native-ui/?lang=en
I am creating an iPad app in which I have a textInput component that when it is in focus is suppose to call a callout with a spinner in it. The problem is that the softkeyboard is showing up every time I touch the textInput component. I have tried everything I could find which includes the following:
private function onActivating(event:SoftKeyboardEvent):void
{
event.preventDefault();
}
<s:TextInput softKeyboardActivating="onActivating(event)" />
and
<s:TextInput needsSoftKeyboard = "False"/>
Both of these examples are still having the softkeyboard show up.
Have you tried to simply disable the TextInput and change the styles so it doesn't look disabled? Touch events may not trigger though but short of styling a label [as suggested above] you'll have to do some trickery one way or another.