Javascript iPad没有在<；输入>；

在iPad上运行应用程序时，

字段出现问题

在桌面上单击文本框，输入文本，然后单击按钮验证输入。不过，在iPad上，当你点击键盘面板时，它会打开键盘面板，但当你打字时，文本框中不会显示文本。
更奇怪的是，我在应用程序的另一个部分中有一个

，它工作得非常好。区别在于一个位于应用程序顶部，另一个位于导入的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

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

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>

$(function () {

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

Main.html
->container.html（通过iframe导入）
->第1部分（通过加载（url）导入第n-1页）
->第2部分（通过加载（url）导入第n页）
->第3部分（通过加载（url）导入第n+1页）
pageN.html
->包含字段

位于主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

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

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>

$(function () {

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

导入的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

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

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>

$(function () {

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

输入{
-webkit用户选择：自动；
}

关于在导入的HTML上使用事件，我学到的一件事是，您需要使用ontouchstart和其他工具来调用click函数。但在这种情况下，我可以让iPad打开键盘，所以我不知道为什么它不能识别键盘键上的点击，或者为什么它不能将值发送到文本框中

[编辑：]我发现我没有写入任何文本的原因是因为iPad认为

字段不存在（它在警报中显示为空，而不是

[object object]

或

[object HTMLInputElement]

）。我不知道为什么

---

[编辑2:]我尝试使用

getElementsByTagName

和

getElementsByClassName

而不是

getElementById

。这样看来，它似乎可以识别

，但我仍然无法达到该值。

当您在

文档之后动态创建输入或加载html。ready

调用时，jQuery

.live（）

函数就是问题所在

通常情况下，你会有这样一个函数：

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

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

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>

$(function () {

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

将成为：

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

    $('#text1').live('keyup', doSomething);
})

---

这不是问题的实际解决方案，而是一种相当“粗糙”的解决方法

出于某种原因，iPad中的键盘没有将值发送到

，尽管它触发了按键事件。因此，我被迫捕获这些值，将它们写下来，然后将完整的字符串发送到文本框中。 换句话说，做同样的工作，键盘应该自动开始

// 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上工作，但在桌面浏览器上表现得很奇怪）。

我在构建PhoneGap应用程序时也遇到了同样的问题。但不确定是否是同一个问题：

罪魁祸首是

-webkit用户选择：无


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

删除
-webkit用户选择：无或者至少更有选择性地应用它，这样做了

直到现在，我才写下谷歌最终给出的答案。这是；）
 另一个粗略的解决方法（适用于所有字符）：

我不得不添加
！重要信息
至
用户选择：自动

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;  
}

它不起作用。文本框停止响应桌面版本“文本框停止响应输入”中的输入。。。不知道你说的是什么意思。你加载jQuery库了吗？你到底想用javascript函数做什么？你有没有把它放在我可以看的地方？我的意思是你写的文本不再出现在文本框中。不，我不能提供任何例子，因为这是公司所有的。然而，我设法找到了一个解决办法，尽管在我看来，这个办法相当“令人不快”。捕获按键代码并手工编写（就像键盘本身首先应该做的那样）看起来像iOS Safari bug
-webkit用户选择：无
在iOS 9.3/iPhone 6S上的
input type=“text”
元素上只允许1个字符……对我来说很有用！非常感谢！