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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.