javascript 防止键盘在 iPad webapps 中的文本框焦点/点击上弹出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3777669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent keyboard from popping on textbox focus/click in iPad webapps
提问by kevin_rd
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.
我正在尝试在 iPad 应用程序上创建自定义键盘。但是每次输入获得焦点时，都会弹出原生 iPad 键盘。在 JavaScript 中，如何防止这种情况发生。
回答by timnyah
add attribute 'readonly' to your input and provide a different means of populating the value.
将属性 'readonly' 添加到您的输入并提供填充值的不同方法。
回答by alanboy
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.
我认为您无法阻止键盘出现在输入字段中。但是，您可以使用 CSS 创建一个看起来像输入字段的 html 元素，并处理 onClick 事件以显示您的自定义键盘。
<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 Touchfor developing Web Apps for iOS devices.
您应该查看Sencha Touch以开发适用于 iOS 设备的 Web 应用程序。
回答by Ben Althauser
positionan absolutedivwith a z-index:1on top of the text input field, and attach an onclickhandler to the divthat launches the keypad.
position一个absolutediv用z-index:1在文本输入字段的顶部，并附加onclick处理程序的div一个启动键盘。
Next step would be to attach the keypad numbers to affect the value of the text field.
下一步是附加小键盘数字以影响文本字段的值。
回答by quentinous
The best thing to do is to stop the event on the onclick event.
html :
最好的办法是在 onclick 事件上停止该事件。
html :
<textarea onclick='myOnClickEvent'></textarea>
Javascript :
Javascript :
function myOnClickEvent(e){
e.stopPropagation();
}
Dojo :
道场：
function myOnClickEvent(e){
dojo.stopEvent(e);
}
Sencha :
煎茶：
function myOnClickEvent(e){
e.stopEvent();
}
I hope this help.
我希望这有帮助。
回答by chris raethke
You should check the safari sdk, there are some extra input types available with mobile safari/html5.
您应该检查safari sdk，移动 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.
否则，您可以将 div/span 的样式设置为看起来像一个输入并有一个支持隐藏字段，然后当它被点击时，会显示您的自定义 div 等，并根据用户的操作将值放入“输入”中。
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
当然，您可以通过渐进增强来做到这一点，并将其呈现为普通文本框，然后在页面加载时交换隐藏字段/div/span 等的普通文本输入
回答by robocat
FYI, you can also call blur() on an input to hide the keyboard... although probably not a good solution in this situation.
仅供参考，您也可以在输入上调用 blur() 来隐藏键盘......尽管在这种情况下可能不是一个好的解决方案。
回答by Krishnamoorthy Acharya
We had exact same issues so we used following code.It worked
我们遇到了完全相同的问题，所以我们使用了以下代码。它有效
<input type="text" onclick="openAlphaNumKeyboard(this)" onfocus="blur()" id="test-input" />
