2012-01-24 8 views
2

HTMLドキュメントの一部を選択して注釈を付けることができるWebアプリケーションを開発しています。 選択したテキストを取得するには、IE9、FF、およびSafariでかなりうまく動作するwindow.getSelection()を使用します。IPad 2で選択したテキストをJavaScriptで取得する

  • 私はちょうど適切な選択を返しwindow.getSelection()秒、それをタップして単語を選択した場合:私のiPad 2上で同じページを使用している場合 は、しかし、私はトラブルに実行します。
  • テキスト範囲(ここではhttp://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipadと記載)を作成すると、常に「null」が返されます。 私はすでにウィンドウ、ドキュメント、および関連するイベントオブジェクトを調べましたが、成功しませんでした...

本当にありがとうございました!

編集:ちょっとした例です。テキストを選択してボタンを押します。サファリ(PC)関数は、選択した値を出力します...

<html> 
    <body> 
     <script> 
      function a() 
      { 
       alert(window.getSelection()); 
      } 
     </script> 
     Hello World! <input type="button" onclick="a();" 
    </body> 
</html> 
+0

はよろしいですか? 'window.getSelection()'はiPhone上の任意の選択に対してうまく動作します。 –

+0

私は小さな例を追加しました。残念ながら私はかなり確信している;-) – RealAugust

+0

ああ、私はそれがこのようなものかもしれないと思った。ボタンで 'click'イベントが発生した時点で、その選択は失われていると思われます。代わりに 'touchstart'イベントを使用してみてください。おそらく、 'style =" - webkit-user-select:none "をボタンに追加すると動作するかもしれませんが、それについては分かりません。 –

答えて

2

オーケーでは最終的に私はこの問題を解決しました:ティムは、クリックイベントを想定したように崩壊するための選択になります。私はこれを通常のSafariの場合とはちょっと変わった動作と考えていますが、これは起こりません。

ただし、解決策はclickイベントを使用しないことです。代わりに私はjQueryモバイルによって提供される "vlick"を使用しています。

全作業例:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
    Hello World! <input type="button" id="button1" /> 

    <script> 
     function a() 
     { 
      alert(window.getSelection()); 
     } 

     $("#button1").bind("vclick",a); 
    </script>  
</body> 
</html> 
関連する問題