Событие onpaste / paste не запускается для таблицы при первых нескольких попытках

Question

Google Chrome - это приложение для внутреннего использования, которое не требует кросс-браузерной совместимости

Смотрите http://jsfiddle.net/spetnik/vpcyt4yv/

У меня есть таблица, в которую я пытаюсь разрешить вставку данных. Я сделал отдельные ячейки по выбору:

<td tabindex="0">

Первоначально я пытался добавить событие onpaste к самим элементам TD, но это не сработало вообще. Поэтому вместо этого я добавил событие в элемент таблицы и просто проверил, является ли сфокусированный элемент TD, а затем вставил данные в этот элемент:

document.getElementById("tblData").onpaste = function(evt){
    if(document.querySelector(":focus").tagName.toLowerCase() != "td"){
        return;
    }

    document.querySelector(":focus").innerText = evt.clipboardData.getData("text/plain");
};

Хотя это, по сути, работает, событие обычно не срабатывает с первой попытки. Кажется, мне нужно либо: а) щелкнуть по таблице случайное число раз (каждый раз отличается) или б) изменить фокус на другое окно, а затем снова вернуться, прежде чем событие сработает. В jsFiddle я добавил вызов console.log() в самом начале события, чтобы я мог точно видеть, когда событие запускается на панели отладки.

Смотрите выше jsFiddle или просто результат на https://jsfiddle.net/spetnik/vpcyt4yv/embedded/result/

Answer 1

Вот это да. Похоже, виновником является -webkit-user-select/user-select CSS! Я обнаружил это, когда заметил, что вставка будет разрешена только после первоначального щелчка и перетаскивания мыши над ячейкой (что объясняет случайный щелчок - только после того, как я нажал, пока моя мышь не переместилась в середине щелчка, это сработало). Я удалил этот CSS и теперь он работает. Конечно, теперь мне нужно найти обходной путь для предотвращения выбора, но, по крайней мере, я больше не в тупике.

Редактировать: Кажется, что на обычном элементе (например, DIV с onpaste, установленным на сам элемент), onpaste вообще не работает, когда -webkit-user-select имеет значение none. Я отправил сообщение об ошибке здесь

РЕДАКТИРОВАТЬ 2: Мне удалось найти следующий обходной путь: Если я программно выделю содержимое ячейки до нажатия Ctrl-V, то он будет работать, даже если для -webkit-user-select установлено значение none. Я достиг этого, добавив следующий обработчик событий (jQuery, показанный здесь) к TD (это все еще не работает в автономном DIV с параметром -webkit-user-select, равным none):

$(elem).click(function(evt){
    var selection = window.getSelection();            
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
})