web-dev-qa-db-ja.com

iOSデバイス（モバイルSafari）の入力フィールドでプログラムでテキストを選択する

IOSデバイスで入力フィールドのテキストをプログラムで選択するにはどうしますか（例： iPhone、iPad、モバイルSafariを実行していますか？

通常、_<input ... />_要素で.select()関数を呼び出すだけで十分ですが、これらのデバイスでは機能しません。カーソルは、選択されていない既存のエントリの最後にそのまま残されます。

javascriptiphonehtmlsafariios
83
sroebuck
input.setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

92
jobwat

このスレッドでは何も機能しませんでした。iPadで機能するものを次に示します。

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);
28
nkrop

ネガティブなことを証明するのは難しいですが、私の調査では、これがMobile Safariのバグであることを示唆しています。

Focus（）は多かれ少なかれ機能しますが、成功するには複数のタップが必要になる場合があります。ユーザーが問題のフィールドをタップした場合、タップ自体がフィールドを提供するので応答する必要はありません。フォーカス。残念ながら、select（）isは、Mobile Safariでは単に機能しません。

あなたの最善の策は、 Apple のバグレポートかもしれません。

25
clozach

このフィドルを参照 ：（入力ボックスにテキストを入力し、「テキストの選択」をクリックします）

IPod（第5世代iOS6.0.1）の入力ボックスでテキストを選択し、キーボードを開いて、Cut/Copy/Suggest ...メニューを表示しています。

プレーンjavascriptを使用します。 jQueryでこれを試していない

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

番号999は単なるサンプルであることに注意してください。これらの数値を選択する文字数に設定する必要があります。

UPDATE：

  • iPod5-iOS6.0.1-正常に動作しています。
  • iPad1-iOS5.1.1-テキストのみが選択されています。選択を1回タップして、カット/コピーメニューを開きます
  • iPad2-iOS4.3.3-テキストのみが選択されています。選択を1回タップして、カット/コピーメニューを開きます

最後の2つについては、input要素でクリックイベントをトリガーして実験することができます。

更新：（07-10-2013）

  • iPod5-iOS7.0.2-リンクでフィドルを使用する：入力ボックスに入力したテキストが表示されません。 selectを押すと、facebook.com（??? wtf ???）にリダイレクトされます。そこで何が起こっているのかわかりません。

UPDATE：（14-11-2013）

  • iOS 7.0.3： binki からのコメントのおかげで、.selectionStartおよび.selectionEnddoes動作します。

UPDATE：（15-01-2015）

  • iOS 8.x.x： Michael Siebert からのコメントに感謝します。コメントから取られた：私は両方のケースでそれを動作させるために、フォーカスとクリックイベントの両方をリッスンし、setTimeout/_。debounceする必要がありました：入力をクリックするか、タブでフォーカスします
23
bart s

申し訳ありませんが、以前の投稿で、JavascriptがJavascriptでの回答を望んでいることを暗示していることに気付きませんでした。

IWebViewでjavascriptを使用して必要なものを取得するために、2つの重要な情報をまとめて機能させることができました。モバイルブラウザについてはわかりません。

  1. element.setSelectionRange(0,9999);は私たちが望むことをします

  2. mouseUpイベントは選択を取り消しています

したがって（プロトタイプを使用）：

 input.observe（ 'focus'、function（）{
 this.setSelectionRange（0、9999）; 
}）; 
 input.observe（ 'mouseup '、function（event）{
 event.stop（）; 
}）;

トリックを行います。

マット

7
Matt

フォーカスは機能するように見えますが、ネイティブイベントから直接呼び出された場合のみです。 SetTimeoutのようなものを使用してフォーカスを呼び出しても、キーボードを呼び出すことはありません。 iOSキーボードの制御は非常に貧弱です。それは良くない状況です。

3
yodaisgreen

IPad上のiOS 7でこの作業を行うことができた唯一の方法は、実際に_<textarea></textarea>_フィールドの代わりに_<input>_を使用することでした。

例えば.

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

ユーザーがエリア内のテキストを変更できないようにする方法はより困難でした。textareaを読み取り専用にすると、選択のトリックが機能しなくなるからです。

1
Mikael Lepistö

私はこの解決策を探して行きましたあなたの応答はすべて助けましたそれは私のために別のワームの缶を開きました。

クライアントは、ユーザーにクリックしてすべて選択、、およびを許可することを望んでいました'tab 'そして、iPadですべてを選択します（外付けキーボードを使用します。

この問題に対する私の解決策は、イベントを再配置することでした。最初にフォーカス、次にクリック、次にタッチスタート。

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

あなたが私を何度も助けてくれたので、これが誰かの助けになることを願っています。

1
adnan tariq

Android 2.2：に付属するWebkitで次のような何かが私のために働いています

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

Chromium Issue 32865 をご覧ください。

1
robocat