How can I leverage the 'Go' or 'Submit' button on a mobile software keyboard in a HTML5 app? - mobile

Mobile devices with software keyboards often change the keyboard when filling in a web form to allow the user to submit with one click and avoid jabbing at the 'submit' button of the form.
How can one access this functionality from a phonegap/cordova/other HTML5 app?
I struggled with this for a while, so gonna share the answer here.

This blog post by Matt Nunes showed me that the type="submit" input should be the first button in the form.
Once you know this, you might be satisfied, but I wanted to hide the button - why have it when you want the user to use their keyboard? For an outline of how to do this, check out this related question - Is it too much to ask to have an invisible button on jQuery Mobile?
Effectively, when the user taps the 'go' button on their soft keyboard, it shows up to the browser as a click on the submit button. Therefore,
(1) Override the default event
(2) Profit.
Hopefully this helps someone.

Related

How to create popup form properly in React?

I'm new to React and I'm building a login and register feature for my website. I want the user to click the login or register button and then the form will popup for user to enter their information. The first thing comes to my mind is using modal in bootstrap but I cannot enter anything in the input fields. Does it the right way to do a popup form in React?
I use react-modal(https://www.npmjs.com/package/react-modal) and redux-form(https://redux-form.com/8.3.0/) for this kind of works

Correct way to add custom buttons with OpenTok

I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.

How to prevent the keyboard to appear in phonegap?

I'm developing an application with sencha touch and phonegap, and I have been created a component extending TextField class. It works this way:
The user taps the field
The application open a modal with a calendar inside it
The user taps the number representing the day he wants to choose
The modal closes and set his value on the textfield.
I wanna know if is there a way to when the user taps the TextField, the keyboard don't appear.
Thanks.
PS: Sorry my bad english, I wish you could understand ^^
I have been solved my problem just adding readOnly: true on my textfield.
Thanks for everyone who tried to solve it.

In Silverlight, How can I disable Back and Forward navigation using browser buttons?

I'm using the Navigational Framework in Silverlight 4. I'm starting to believe that this was a mistake as the browser buttons are really screwing things up for users. For instance, when a child window is opened the user believes they can close the window by pressing the back button. It doesn't close the window obviously, it just navigates the parent page back a step. The end result is a messed up data set. I'm fed up with the little control I have over the navigation of my application; forward and back buttons are anachronistic. Web applications don't work that way anymore. Please someone tell me how I can disable their functionality; that is, cancel navigation when it is started from one of these buttons.
Remove this code from your html page which holds your silverlight XAP:
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
This is the history frame.
You will likely have to do this in the actual web/asp.net page, as Silverlight has no real control over the browser.
Some workarounds in this article:
http://lennilobel.wordpress.com/2009/07/26/defeat-the-evil-back-button-in-your-asp-net-applications/

Reacting to StylusDown in control's UI?

I'm building a touch screen application in WPF and I'm wanting to show a change in UI when the user presses a button with their finger/stylus. Currently you only get a flicker of UI change once the finger is released but nothing before that.
I've been trying to hook up triggers and/or eventtriggers in the button template to things like stylusdown and touchdown but to no avail.
I've hooked up some console writes on events attached to a button and they appear in the following order:
StylusDown
StylusButtonDown
TouchDown
StylusUp
StylusButtonUp
Click
All of which firing at the same time when the finger is lifted from the screen. (TouchUp doesn't seem to fire at all).
Any ideas on how I could begin to capture a finger pressing onto a button in the template so I can give the user some idea that they are actually pressing a button?
After blogging in more detail about this issue I had a comment recommending using a SurfaceWindow and then SurfaceButtons from the Surface Toolkit (currently in Beta) and now all is working as I would expect.
Update: The link is now dead. Here's the link to that page from Wayback Machine.

Resources