12

<input>在 iPad 上运行我的应用程序时，我遇到了现场问题。

在桌面上单击文本框，输入文本并单击按钮以验证输入。但是在 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

<textarea>坐在主html上的代码是这样的：

<form id="formNotes">
    <textarea id="mainTextbox" type="text" onKeyUp="RefreshNote()" onChange="RefreshNote()"></textarea>
</form>

<input>导入的html页面内的字段代码如下：

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>字段不存在（它在警报中显示为空白，而不是[object Object]or [object HTMLInputElement]）。我不知道为什么。

[编辑 2：] 我尝试使用getElementsByTagNameandgetElementsByClassName而不是getElementById. 有了它，它似乎可以识别<input>，但我仍然无法达到该值。

4

5 回答 5

32

我在构建 PhoneGap 应用程序时遇到了同样的问题。不知道这是否是同一个问题：

罪魁祸首是-webkit-user-select: none;。

这是演示。

我原以为禁用用户选择只会阻止诸如放大镜或复制粘贴按钮之类的各种工具出现，但事实证明这完全禁用了输入。点击输入字段时会出现键盘——但仅此而已：您输入的任何内容都不会显示在输入字段中。

删除-webkit-user-select: none;或至少更有选择地应用它就可以了。

只有现在我正在写这个答案，谷歌终于提供了。这是关于SO的另一个答案；）

于 2014-02-05T00:50:45.210 回答
1

当您在调用后动态创建输入或加载 htmldocument.ready时，jQuery.live()函数就是票证。

所以虽然通常你会有这样的功能：

$(function () {

    $('#text1').on('keyup', function() {
        // do something
    })
})

会成为：

function doSomething() {
    // do something
}
$(function () {

    $('#text1').live('keyup', doSomething);
})
于 2013-03-07T18:37:10.070 回答
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;
}

但是，此解决方案仅适用于字母数字字符。如果我想使用特殊字符，我需要为每个单独的键代码添加一个开关盒（charCode在 iPad 上工作，但在桌面浏览器上表现得很奇怪）。

于 2013-03-13T16:42:13.997 回答
1

另一个粗略的解决方法（适用于所有角色）：

document.addEventListener('keydown', function(e) {
  window.focus()
  $(':focus').focus()
});
于 2016-01-11T21:54:42.970 回答
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;  
}
于 2019-07-18T18:52:30.183 回答