在iPad上运行我的应用程序时遇到<input>
字段的问题。
在桌面上,单击文本框,键入文本,然后单击按钮以验证输入。然而,在iPad上,单击它时会打开键盘面板,但键入时文本框中不会显示文本
为了使事情变得更奇怪,我在应用程序的另一部分中有一个<textarea>
,它完美无缺。区别在于一个位于应用程序之上,另一个位于导入的html中。
应用程序的结构如下:
在顶部我有主HTML5页面,它导入一个包含3个div的html页面。每个div依次导入其他html页面。这些页面各有不同的内容,包括有问题的输入字段。
像这样:
Main.html
-> container.html (imported via iframe)
-> div1 (imports page n-1 via load(url))
-> div2 (imports page n via load(url))
-> div3 (imports page n+1 via load(url))
pageN.html
-> contains the <input> field
主html上<textarea>
的代码如下:
<form id="formNotes">
<textarea id="mainTextbox" type="text" onKeyUp="RefreshNote()" onChange="RefreshNote()"></textarea>
</form>
导入的html页面中<input>
字段的代码如下:
input{
-webkit-user-select: auto;
}
<form id="formInput">
<input id="text1" type="text" ontouchstart="OpenKeyboard(this)" onKeyDown="WriteText(this)" onKeyUp="WriteText(this)" onChange="WriteText(this)"></input>
</form>
我在导入的HTML上使用事件时学到的一件事是你需要使用ontouchstart和其他人调用点击功能。但在这种情况下,我可以让iPad打开键盘,所以我不知道为什么它没有识别键盘上的点击键,或者为什么它没有将值发送到文本框中。
[编辑:]我发现我没有收到任何文字的原因是因为iPad认为<input>
字段不存在(它在警报中显示为空白,而不是{{ 1}}或[object Object]
)。我不知道为什么。
[编辑2:]我尝试使用[object HTMLInputElement]
和getElementsByTagName
代替getElementsByClassName
。有了它,它似乎识别getElementById
,但我仍然无法达到价值。
答案 0 :(得分:31)
构建PhoneGap应用时遇到了同样的问题。不确定它是否是同一个问题:
罪魁祸首是-webkit-user-select: none;
。
我原本以为禁用用户选择只会阻止各种工具,如放大镜或copy'n'paste按钮显示,但事实证明这完全禁用了输入。点击输入字段时会显示键盘 - 但这就是它:输入字段中显示的任何内容都不会显示。
删除-webkit-user-select: none;
或者至少选择性地应用它可以解决问题。
直到现在我正在写这个答案谷歌终于提供了。这是another answer on SO;)
答案 1 :(得分:1)
在document.ready
调用后动态创建输入或加载html时,jQuery .live()
函数就是故障单。
所以通常你会有这样的函数:
$(function () {
$('#text1').on('keyup', function() {
// do something
})
})
会变成:
function doSomething() {
// do something
}
$(function () {
$('#text1').live('keyup', doSomething);
})
答案 2 :(得分:1)
这不是问题的实际解决方案,而是一种相当“粗糙”的解决方法。
出于某种原因,iPad中的键盘没有将值发送到<input>
,尽管它正在触发关键事件。所以我被迫捕获值,将它们写下来,然后将完整的字符串发送到文本框中。
换句话说,键盘应该自动完成同样的工作!
// Text container
temp = "";
document.addEventListener('keydown', function(event) {
// Checks if the key isn't the delete
if(event.keyCode != 8){
// Converts and writes the pressed key
temp += String.fromCharCode(event.keyCode);
}
else{
// Deletes the last character
temp = temp.slice(0, temp.length-1);
}
}
document.addEventListener('keyup', function(event) {
// Writes the text in the text box
document.getElementById("text1").value = temp;
}
此解决方案仅适用于字母数字字符。如果我想使用特殊字符,我需要为每个单独的密钥代码添加一个switch case(charCode
在iPad上工作,但它在桌面浏览器上表现得很奇怪。)
答案 3 :(得分:1)
另一种粗略的解决方法(适用于所有角色):
document.addEventListener('keydown', function(e) {
window.focus()
$(':focus').focus()
});
答案 4 :(得分:0)
我必须将!important
添加到user-select: auto
input {
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}