Disable popup keyboard via javascript

5,572 views
Skip to first unread message

crankshaft

unread,
Oct 30, 2010, 2:53:10 AM10/30/10
to iPhoneWebDev
Hi all;

Been googling this for an hour or so and can't seem to find an answer.

Is it possible to prevent the ipad keyboard from popping up
programatically, either on a field by field basis, or switch it on and
off via javascript.

I have an application which needs to use my own on-screen keyboard,but
whenever a user focuses on a text field the keyboard pops up.

Of can it be fooled into thinking that an external keyboard is
connected ??

Many Thanks

Jordan Dobson

unread,
Oct 30, 2010, 3:09:03 AM10/30/10
to iphone...@googlegroups.com
It seems to me that you would just not use a text-field and detect a touch on an element that looks like a text field. After each key, on your custom keyboard, is entered you add or subtract that character to your html element depending on if they delete or add characters.

If you need to send to a server by form submit, send the data to a hidden text field perhaps?


--
You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.




--
Jordan Dobson
Designer + Developer

Remi Grumeau 

unread,
Oct 30, 2010, 5:59:03 AM10/30/10
to iphone...@googlegroups.com, iphone...@googlegroups.com
Le 30 oct. 2010 à 09:09, Jordan Dobson <jordan...@gmail.com> a écrit :

It seems to me that you would just not use a text-field and detect a touch on an element that looks like a text field. After each key, on your custom keyboard, is entered you add or subtract that character to your html element depending on if they delete or add characters.

If you need to send to a server by form submit, send the data to a hidden text field perhaps?


Agree !
Only way not to have the native keyboard is not using input as a touch element, but as an hidden container.

Purplecabbage

unread,
Nov 2, 2010, 3:47:22 AM11/2/10
to iphone...@googlegroups.com, iphone...@googlegroups.com

Or can't you preventDefault onfocus?

Untested. 

Sent from my iPhone

Brian McMillin

unread,
Nov 2, 2010, 9:36:40 AM11/2/10
to iphone...@googlegroups.com
Mr/Ms Cabbage -

Unfortunately, on the iPhone4 and iPad I tested, constructs like

  document.getElementById("xx").onfocus=function(e){e.preventDefault();};

have no effect on the popup keyboard.

-----

Please note that the Javascript CamelCaps spelling for "onfocus" is unexpected.  (Obviously, in the HTML, the capitalization does not matter.)

Things like "onClick" are correct as documented in places like w3schools.com.  Different pages in the docs use "onload" and the incorrect "onLoad", for example.  This is problematic since setting the misspelled function is an error-not-caught in JavaScript - the function just never gets invoked.

Does anybody have a definitive list of the correct spellings for the JavaScript names of these DOM features?

Brian


From: Purplecabbage <purple...@gmail.com>
To: "iphone...@googlegroups.com" <iphone...@googlegroups.com>
Cc: "iphone...@googlegroups.com" <iphone...@googlegroups.com>
Sent: Tue, November 2, 2010 2:47:22 AM
Subject: Re: Disable popup keyboard via javascript

Jesse

unread,
Nov 2, 2010, 10:05:37 PM11/2/10
to iphone...@googlegroups.com
It's Mr. but call me purple...

You can do this, but the page jumps a bit ... very hacky ..

<input type="url" id="tiUrl" onfocus="blur()"/>



Cheers,

  Jesse

Brian McMillin

unread,
Nov 2, 2010, 11:55:45 PM11/2/10
to iphone...@googlegroups.com
I tend to agree with Jordan and Remi.  If you are going to all the trouble to make a custom keyboard, do not waste your time trying to shoehorn it into a standard input field.  Roll your own from scratch.  You may need to do things like display a cursor, etc.

To that end, and since I mentioned it in another thread, here is an example.  The data entry fields are completely fabricated, as is the cursor and keyboard.

-----

For your entertainment, you might look at

    http://wisen.us/pricecalc

which is a little toy that I did a while back, when I first waded through all these issues. 

It is a pure HTML/CSS/JavaScript implementation that you can look at in your browser.

Enjoy,

Brian


From: Remi Grumeau  <remi.g...@gmail.com>
Sent: Sat, October 30, 2010 4:59:03 AM

Subject: Re: Disable popup keyboard via javascript

Brian McMillin

unread,
Nov 3, 2010, 9:56:47 AM11/3/10
to iphone...@googlegroups.com
Guys -

I posted a link to a HTML5/CSS/JavaScript AJAXish WebApp that demonstrates several of the topics that are being discussed here.  Since there may be some confusion I hope to clarify things in this new thread.

1. The link that we are discussing is:

    http://wisen.us/pricecalc


which is a little toy that I did a while back, when I first waded through all these issues.  I posted the link since it is a working example and can be examined with the "View Page Source" feature of your browsers. 

2. If you hit the page with an iPhone/iPad you get the App.  If you use anything else it turns itself into a promo page using XMLHttpRequest().  This is because it wouldn't work at all on a non-WebKit browser.  You can use desktop Safari if you tell it the User Agent is a Mobile Safari version.

3. There are several numeric entry fields that are completely fabricated in JavaScript.  The keyboard is synthesized instead of trying to use a native iOS entry technique.  There is a blinking cursor in the active entry field.

4. Data is pulled from a server to do the Currency Conversion Rate feature.  This also uses XMLHttpRequest().

5. The manifest is disabled on this page, so it will not work in Airplane Mode.

6. The Google banner ad shows how one would implement an old-style ad-supported page.  I have not done a version that uses iAd.

7. The $0.99 app in the App Store is almost exactly the same thing you see here, but using Lee Barney's very nice QuickConnect as a wrapper.  It DOES work in Airplane mode, and (of course) has the banner eliminated.

8. The values of all the user selections, conversions and entry fields are saved in localStorage so that you can leave the App and return to right where you left off. This feature is worth examining, because of how I handle the sneaky length limitation and random evaporation of localStorage.  In a nutshell, I add a Magic value to the end of the string which I use as a sanity check for any persistent data.

9. None of this code is in any way intentionally obfuscated, so I hope any interested parties (and lurkers) can benefit from poking into it.

I had not particularly intended to publish this, but lots of people seem to be struggling with these common issues.  It is not like this is intended to be a tutorial, but it is also fairly compact and implements a lot of useful features.

Brian



Reply all
Reply to author
Forward
0 new messages