Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перемещение фокуса при вставке текста (https://javascript.ru/forum/jquery/42824-peremeshhenie-fokusa-pri-vstavke-teksta.html)

mi.rafaylik 11.11.2013 12:13

Перемещение фокуса при вставке текста
 
Есть событие paste, которое должно работать во всех браузерах последних версий, но на практике игнорируется в IE и есть странность в FireFox.
jQuery работает с ним посредством $('element').on('paste', function(){});

Замысел заключается в очистке форматирования вставляемого текста в div contenteditable.
1. Следим за событием paste в нашем div.
2. Запоминаем позицию курсора в div.
3. Перемещаем фокус в textarea, в котором текст вставится без форматирования.
4. Ставим небольшой таймаут. В это время текст из буфера обмена наконец попадает в textarea.
5. В полученном тексте убиваем два или более пробелов подряд, убиваем два или более переноса строк подряд, преобразуем переносы строк \n в <br>\n (т.е. визуально готовим текст для возврата в div).
6. Восстанавливаем позицию курсора в div.
7. Возвращаем уже простой текст обратно в div, в то место, куда вернули курсор.

Посмотреть в действии: http://jsfiddle.net/rafaylik/4k5rg/

Проблемы, которые хотелось бы решить:
1. IE (проверял в 10) совсем игнорирует наше событие paste и дефолтно вставляет форматированный текст.
2. В FireFox textarea получает фокус, но не получает текст из буфера обмена, то есть текст не попадает ни в div, ни в textarea.
Возможно ли вообще сделать решение кроссбраузерным (для последних версий)?

Вот та актуальная часть примера, которая переводит фокус:
<div id="format" contenteditable="true">Вставленный сюда текст преобразуется из форматированного в простой.</div>
<textarea id="plain">Сюда перенаправляем фокус и ловим текст</textarea>

$('#format').on('paste', function(){
	$('#plain').val('').focus();
});

danik.js 12.11.2013 05:22

В последней версии firefox есть объект clipboardData. Он же есть в IE и WebKit

mi.rafaylik 12.11.2013 10:52

Цитата:

Сообщение от danik.js
объект clipboardData

Спасибо!
https://developer.mozilla.org/en-US/..._the_Clipboard

mi.rafaylik 12.11.2013 23:57

clipboardData.getData() работает отлично, код получился короче, и фокус никуда не нужно перемещать.
Пример в действии (для Chrome, Safari, Firefox, Opera): http://jsfiddle.net/rafaylik/YMQPK/
Не получилось только в IE10 ловить событие paste, просто бубна под рукой нет )
А IE11 paste понимают, но с clipboardData работает как-то иначе, нужно разобраться будет..


Часовой пояс GMT +3, время: 16:02.