防止键盘在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

将属性“readonly”添加到输入中，并提供填充值的不同方法。

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

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.

Answer 4

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 5

仅供参考，您也可以在输入上调用blur（）来隐藏键盘......虽然在这种情况下可能不是一个好的解决方案。

Answer 6

我们有完全相同的问题所以我们使用以下代码。它工作

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

Answer 7

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