Hi all I have a window with two text fields and two buttons.When I'm on the second text field, the keyboard is in the way of the buttons. And thus, there is no way to press the buttons. I need to turn the device sideways and a 'done button' appears in my text field which, if clicked, will remove the keyboard. But in the future, I will be locking my app to portrait so I'm just wondering how to solve this issue. Is there a specific keyboard I can call which will have a button to remove the keyboard or anything like that? I'm working with titanium
As suggested, in comments above.
By placing the View inside a ScrollView will allow you to achieve this result. Then when the keyboard is shown for that view you can have the textfield scroll up so it is not covered by the keyboard. Follow this example shown here:
How to make a UITextField move up when keyboard is present?
If you don't want to use a scroll view, or want more control over the 'avoiding', use IHKeyboardAvoiding https://github.com/IdleHandsApps/IHKeyboardAvoiding
(its mine)
Related
I am currently working on a kiosk-ish project on Windows platform, where the user should fill in their contact info. I’ve used the input element with the custom on-screen keyboard, so I don’t need OS-level stuff, but the only problem left is native Chrome UI for interaction with inputs like “tear” cursor and context menu for text-editing actions (copy, paste, etc). I have two questions:
can I customize the color of this “tear” cursor?
can I hide this context menu?
I’ve already made event.preventDefault() with “contextmenu” event аnd used these flags with Chrome shortcut:
--chrome --fullscreen --disable-pinch --overscroll-history-navigation=0 --no-context-menu --kiosk …
Thanks in advance!
You can make the text un selectable so that the user can not click on it for a word selection and so the tear cursor will also not appear with the context menu
Till it is editable the tear cursor ui and functionality is from the native side of the phone which can't be changed.
For hiding the context menu make the input text selection to disable which may be an option but we can't disable selection in an input. Try with custom input
I have an input box which i have camouflaged in the background. Basically, i am developing an app for Honeywell CT50 device, which uses laser scanning for scanning barcodes and qrcodes. Since, laser scanner requires an input box to contain the value of barcode, once scanned, being the default behavior of focused input box, keypad appears on the mobile screen. I don't want the keypad to appear as the value is being read by scanner. I am developing the application using angular 6. Due to the keypad popping up from bottom of the screen, i am also facing some issues regarding vertical scrolls.
I have tried hiding the keyboard using :
<input #barcodeInput onfocus='blur()'>
The above doesn't work.
Then i tried the following:
#ViewChild('barcodeInput') barcodeInput: ElementRef;
this.barcodeInput.nativeElement.dismissSoftInput();
The above doesn't work as well.
I am stuck and can't proceed. I have to hide the keypad when i load a particular component, keep focus on the hidden input box so that laser scanner works without any click and then clear the value of hidden text box once the value is processed.
Please suggest me a solution!
I know the question is so old, but may be there are still some needs.
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.
So I have a small SPA written in JS. It has several input fields, but no actual 'form'. Everything is bound with JS.
When the user gets to the last input on a form page, if they press 'tab' or 'enter', I hijack the key event and fire the animation to scroll the next form page in. This all works great.
However, when a user visits on iOS (or android for that matter) if they start filling out inputs and hit the 'next' key, when they reach the end of a form section, the device focuses the next input off screen, and breaks the entire layout, scrolling the viewport in awkward ways and such.
So my question is
1) Is there a way through JS to hijack the 'next' button and properly fire my animations?
or
2) Is there a way to hide the prev/next buttons?
or
3) Is there a way to prevent the 'next' button from jumping to the next section?
I tried making a small jsfiddle that fired an alert on keyup, but the 'next' key doesn't seem to have any sort of keycode, or even to fire the keyup event :/
Thank you for any help.
I'd try adding hidden dummy input field after the last real field on each page, and going to the next page any time it gets focus.
I'm aware that questions have been asked and answered about the Android soft keyboard and which buttons it shows by default, and in what circumstances, and how to modify them.
However, all the answers involve changing the Java code. Since I am writing a cross-platform app using Phonegap and jQueryMobile, I'd like to stay away from learning Java.
My problem is this:
I have a form with (in this order, in abbreviated html):
<form action='javascript:processSubmit()'>
<select id='expenseType'/>
<input type='text' id='expenseAmount'/>
<select id='expenseDate'/>
<button type='submit'/>
</form>
What currently happens is that the soft keyboard will appear once I press the text input field. So far so good. The button in the bottom right corner of the soft keyboard says 'Next'. But pressing it does not shift the focus to the next form field. And when the user has clicked on the second select and picked a value, the keyboard button does not change to 'Done'.
Is there not a way to give the fields some special html attribute to make the magic happen?
Or a Javascript way to change the softkeyboard?
AFAIK, there is no way from JavaScript or HTML to affect the behavior of the Android soft keyboard.
I know that is a very old question, but with this plugin https://github.com/driftyco/ionic-plugin-keyboard you can change this behaviour with the Keyboard.hideKeyboardAccessoryBar method
I'm trying to make it easy for an iphone user to copy some text to the clipboard in mobile safari. As in the usual "touch-hold-copy". There is a specific bit of text I want to a user to copy. I have full choice of the html markup in which to wrap the text. How can I make it easy, rather than abitrary? For instance:
Is there a way to "select all" the text upon touch-down using javascript? Then a user could just continue to touch-hold and then choose copy?
Is there a way to bring up the "select all" option? Like you can when typing in a text box? After which they can choose copy?
If there's no javascript solution, how can I arrange the html to help Safari select the right bit of text easily? As opposed to just a word, or a wrapping div?
I've tried onFocus="this.select()" for various elements, none seem to work. Also tried onClick.
Those who have tried to port a site that uses ZeroClipboard to the iPhone might have some ideas.
Cheers
instead of this.select(); I used the following and it worked!
this.selectionStart=0;
this.selectionEnd=this.value.length;
The magic sauce for me was the combination of these three:
onFocus="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for big screens -->
onTouchEnd="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for small screens -->
onMouseUp="return false" <!-- to stop the jitters -->
Try ontouchstart instead of onfocus. Onfocus fires approx. 500ms after ontouchend, same as onclick, onmousedown, and onmouseup. See https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 for more details on mouse events.
I have run into the same problem. The onfocus event is the right one to trap (ontouchstart isn't triggered if you use the iphone keyboard [next]/[prev] buttons.) If you put an alert(); in your onfocus="" handler, you'll see the alert box pop up. The problem is this.select(); I still haven't found an answer to this, but when/if I do, I'll post it here.