12

<input>iPad でアプリケーションを実行すると、フィールドに問題が発生します。

デスクトップで、テキスト ボックスをクリックしてテキストを入力し、ボタンをクリックして入力を検証します。ただし、iPad では、クリックするとキーボード パネルが開きますが、入力してもテキスト ボックスにテキストが表示されません。
さらに奇妙なこと<textarea>に、アプリケーションの別のセクションに があり、完全に動作します。違いは、1 つはアプリケーションの上にあり、もう 1 つはインポートされた 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 でイベントを使用することについて学んだことの 1 つは、ontouchstart などを使用してクリック関数を呼び出す必要があることでした。しかし、この場合、iPad でキーボードを開くことができるので、キーボード キーのクリックが認識されない理由や、テキスト ボックスに値が送信されない理由がわかりません。

[編集:] テキストが書き込まれない理由は、iPad がフィールドが存在しないと見なしているためであることがわかりました (または<input>の代わりにアラートに空白で表示されます)。理由はわかりませんが。[object Object][object HTMLInputElement]

[編集 2:]の代わりにgetElementsByTagNameandを使用しようとしました。これで を認識しているようですが、まだ値に到達できません。getElementsByClassNamegetElementById<input>

4

5 に答える 5

32

PhoneGap アプリの構築中に同じ問題が発生しました。ただし、同じ問題かどうかはわかりません。

犯人は-webkit-user-select: none;.

これがデモです。

ユーザー選択を無効にすると、虫眼鏡やコピー アンド ペースト ボタンなどのさまざまなツールが表示されなくなるだけだと思っていましたが、これにより入力が完全に無効になることがわかりました。入力フィールドをタップするとキーボードが表示されますが、それだけです。入力フィールドには何も入力しません。

削除する-webkit-user-select: none;か、少なくともより選択的に適用することでうまくいきました。

そして、私がこの回答を書いている今、グーグルがついに提供します。ここにSOに関する別の答えがあります;）

于 2014-02-05T00:50:45.210 に答える
1

呼び出し後に動的に入力またはロード html を作成する場合document.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

別の大雑把な回避策 (すべてのキャラクター):

document.addEventListener('keydown', function(e) {
  window.focus()
  $(':focus').focus()
});
于 2016-01-11T21:54:42.970 に答える
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;
}

ただし、このソリューションは英数字に対してのみ機能します。特殊文字を使用したい場合は、個々のキー コードごとにスイッチ ケースを追加する必要があります ( charCodeiPad では機能しましたが、デスクトップ ブラウザーではおかしな動作をしました)。

于 2013-03-13T16:42:13.997 に答える
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 に答える