Prevent keyboard from popping on textbox focus/click in iPad webapps

Question

I am trying to create a custom keyboard on an iPad application. But each time the input get the focus, the native iPad keyboard pops up. How can I prevent this, in JavaScript.

score 13 · Answer 1 · answered Mar 06 '12 at 18:10

13

add attribute 'readonly' to your input and provide a different means of populating the value.

answered Mar 06 '12 at 18:10

timnyah

131
1
3

1

Note that certain widget plugins won't bind events on readonly inputs – Pierre de LESPINAY Jan 17 '14 at 16:17

score 1 · Answer 2 · answered Jan 05 '11 at 00:24

1

I don't think you can prevent the keyboard from appearing on input fields. However you could create an html element that looks just like an input field with CSS and handle the onClick event to show your custom keyboard.

<style>
    .textField{
        width: 120px;
        height: 17px;
        border-style:inset;
        border-width: 2px;
        border-color: gray;
        float: left;
    }
</style>
<script>
    function showKeyboard(){
        alert("show the my cool keyboard");
    }
</script>

Name: <div onClick="showKeyboard()" class="textField"></div>

You should checkout Sencha Touch for developing Web Apps for iOS devices.

answered Jan 05 '11 at 00:24

alanboy

369
3
15

This is a titanium "almost native" app, not html, so unfortunately this won't work. – chris raethke Nov 03 '11 at 06:42
The idea is: I don't know why you're creating your own keyboard (IT'S A DONE PROJECT). But while you're at it why don't you create you're own custom components; that are meant for your custom keyboard. – dovidweisz Jan 02 '14 at 17:21

score 1 · Answer 3 · edited Nov 21 '12 at 18:07

1

position an absolute div with a z-index:1 on top of the text input field, and attach an onclick handler to the div that launches the keypad.

Next step would be to attach the keypad numbers to affect the value of the text field.

edited Nov 21 '12 at 18:07

Bruno Vieira

3,884
1
23
35

answered May 20 '11 at 23:21

Ben Althauser

11
1

score 1 · Answer 4 · answered Jul 12 '11 at 12:52

The best thing to do is to stop the event on the onclick event.
html :

<textarea onclick='myOnClickEvent'></textarea>

Javascript :

function myOnClickEvent(e){
e.stopPropagation();
}

Dojo :

function myOnClickEvent(e){
dojo.stopEvent(e);
}

Sencha :

function myOnClickEvent(e){
e.stopEvent();
}

I hope this help.

score 0 · Answer 5 · answered May 08 '12 at 04:13

0

FYI, you can also call blur() on an input to hide the keyboard... although probably not a good solution in this situation.

answered May 08 '12 at 04:13

robocat

5,293
48
65

score 0 · Answer 6 · answered Oct 06 '18 at 05:36

0

We had exact same issues so we used following code.It worked

<input type="text" onclick="openAlphaNumKeyboard(this)" onfocus="blur()" id="test-input" />

answered Oct 06 '18 at 05:36

Krishnamoorthy Acharya

3,846
36
29

score 0 · Answer 7 · answered Mar 17 '11 at 03:18

You should check the safari sdk, there are some extra input types available with mobile safari/html5.

Otherwise you could style a div/span to look like an input and have a backing hidden field, then when it is clicked on bring up your custom div etc and put values into the "input" based on the users actions.

Of course you would do this with progressive enhancement and render this as a normal textbox then on the loading of the page swap the normal text input for your hidden field/div/span etc

Prevent keyboard from popping on textbox focus/click in iPad webapps

7 Answers7

Linked