2012-01-24 3 views
2

Я создаю веб-приложение, которое позволяет выбирать части html-документа и размещать на нем какую-то аннотацию. Чтобы получить выделенный текст, я использую window.getSelection(), который отлично работает в IE9, FF и Safari. Однако я бегу в проблемы при использовании той же странице, на мой IPad 2:Получить выделенный текст на IPad 2 с помощью Javascript

  • Если я просто выбрать слово, коснувшись его на секунду, window.getSelection() возвращает правильный выбор.
  • Если я создаю текстовый диапазон (как описано здесь http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad), всегда возвращайте «null». Я уже изучил окно, документ и связанные с ним объекты событий, но без успеха ...

Любая помощь была бы действительно оценена!

Редактировать: Небольшой пример. Выберите текст и нажмите кнопку. В Safari (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. Вместо того, чтобы использовать «vlick», предоставляемый jQuery mobile.

Полный рабочий пример:

<!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> 
Смежные вопросы