Обработчик события onkeypress для тега ins

187

11 апреля 2019, 09:00

Работаю с тегом , на который мне нужно повесить два обработчика событий: onpaste и onkeypress. Для наглядности:

document.getElementsByTagName("ins")[0].onkeypress = function(e) {inputHandler(e)};
document.getElementsByTagName("ins")[0].onpaste = function(e) {pasteHandler(e)};
function inputHandler(e){
  alert("Keypress");
}
function pasteHandler(e){
  alert("Paste");
}

onkeypress отрабатывает корректно, но onkeypress не работает совсем, я нашла мануал, по которому все должно работать с тегом ins, может он устарел?
Если да, то получается, что невозможно повесить обработчик onkeypress на <ins>?
Ссылка на код: https://codepen.io/anon/pen/zMoOWj?editors=1010

Ссылка на мануал: http://htmlbook.ru/html/attr/onkeypress

Answer 1

Событие onkeypress не срабатывает из за того что элемент ins не получает фокус при вводе текста. Варианты решений: 1) Добавить для <ins>, tabindex="0"

document.getElementsByTagName("ins")[0].onkeypress = function(e) {inputHandler(e)}; 
document.getElementsByTagName("ins")[0].onpaste = function(e) {pasteHandler(e)}; 
 
function inputHandler(e){ 
  alert("Keypress"); 
} 
 
function pasteHandler(e){ 
  alert("Paste"); 
}

<div id="mainBlock" contenteditable="true"> 
        AAAAAA<br> 
        <ins tabindex="0"> 1текст 2текст 1________1    3текст 4текст</ins><br> 
        AAAA<br> 
    </div>

2) сделать <div id="mainBlock" contenteditable="false">", а <ins contenteditable="true"></ins>

document.getElementsByTagName("ins")[0].onkeypress = function(e) {inputHandler(e)}; 
document.getElementsByTagName("ins")[0].onpaste = function(e) {pasteHandler(e)}; 
function inputHandler(e){ 
    alert("Keypress"); 
} 
 
function pasteHandler(e){ 
  alert("Paste"); 
}

<div id="mainBlock" contenteditable="false"> 
        AAAAAA<br> 
        <ins contenteditable="true"> 1текст 2текст 1________1    3текст 4текст</ins><br> 
        AAAA<br> 
    </div>

3) обернуть <ins> со свойстов contenteditable="true" в <div> со свойстов contenteditable="flase"

document.getElementsByTagName("ins")[0].onkeypress = function(e) {inputHandler(e)}; 
document.getElementsByTagName("ins")[0].onpaste = function(e) {pasteHandler(e)}; 
function inputHandler(e){ 
    alert("Keypress"); 
} 
 
function pasteHandler(e){ 
  alert("Paste"); 
}

<div id="mainBlock" contenteditable="true"> 
        AAAAAA<br> 
  <div contenteditable="false"> 
        <ins contenteditable="true"> 1текст 2текст 1________1    3текст 4текст</ins><br> 
    </div> 
        AAAA<br> 
    </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как очистить верстку от JS кода?

Есть скаченная из интернета страница с сайтаНужно очистить весь файл с версткой от JS кода

184

javascript

ReactCSSTransitionGroup: Почему не работает transitionAppear?

Пытаюсь сделать плавное появление/исчезновение уведомления, но не работает transitionAppearДелаю добавление элемента(всплытие уведомления) на событие...

188

javascript