Содержание

Событие onkeyup

❮ Атрибуты события HTML

Пример

Выполнение JavaScript, когда пользователь освобождает ключ:

<input type=»text» onkeyup=»myFunction()»>

Подробнее примеры ниже.


Определение и использование

Атрибут onkeyup срабатывает, когда пользователь освобождает ключ (на клавиатуре).

Совет: Порядок событий, связанных с событием onkeyup:

  1. onkeydown
  2. onkeypress
  3. onkeyup

Поддержка браузера

Атрибут события
onkeyup Да Да Да Да Да

Различия между HTML 4,01 и HTML5

Нет.


Синтаксис

<element onkeyup=»script«>

Значения атрибутов

Значение Описание
script Сценарий, который будет выполняться на onkeyup

Технические детали

Поддерживаемые HTML-теги: Все элементы HTML, за исключением: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

Другие примеры

Пример

Использование «onkeydown» вместе с атрибутом «onkeyup»:

<input type=»text» onkeydown=»keydownFunction()» onkeyup=»keyupFunction()»>


Пример

Вывести фактический ключ, который был выпущен внутри текстового поля:

Enter your name:

<script>
function myFunction() {
    var x = document.getElementById(«fname»).value;
    document.getElementById(«demo»).innerHTML = x;
}

</script>


Похожие страницы

HTML DOM Ссылки: Событие onkeyup


❮ Атрибуты события HTML

OnKeyPress Vs. onKeyUp и onKeyDown

Эта статья Яна Вольтера — лучшая статья, которую я когда-либо встречал, вы можете найти архивную копию здесь, если ссылка не работает.

Он хорошо объясняет все ключевые события браузера,

KeyDown событие происходит при нажатии на клавишу, а затем сразу же событие нажатия клавиши. Затем событие keyup генерируется при отпускании ключа.

Чтобы понять разницу между KeyDown и нажатием клавиши , полезно различать символы и ключи . Ключ является физической кнопкой на клавиатуре компьютера.

Символ является символом набран нажатием кнопки. На клавиатуре США нажатие 4клавиши при удерживании Shiftклавиши обычно приводит к появлению символа «знак доллара». Это не обязательно так на каждой клавиатуре в мире. Теоретически события keydown и keyup представляют собой нажатие или отпускание клавиш, а нажатие клавишисобытие представляет вводимый символ. На практике это не всегда так, как это реализовано.

Некоторое время некоторые браузеры запускали дополнительное событие, называемое textInput , сразу после нажатия клавиши . Ранние версии стандарта DOM 3 задумывали это как замену события

нажатия клавиши , но позже это понятие было отменено. Webkit поддерживал это между версиями 525 и 533, и мне сказали, что IE поддерживал это, но я никогда не обнаруживал этого, возможно, потому что Webkit требовал, чтобы он назывался textInput, в то время как IE называл его textinput .

Существует также событие под названием input , поддерживаемое всеми браузерами, которое вызывается сразу после внесения изменений в текстовое поле или поле ввода. Обычно срабатывает нажатие клавиши, затем в текстовой области появляется напечатанный символ, а затем срабатывает ввод. Вход событие фактически не дает никакой информации о том, что было напечатан ключ — вы должны проверить текстовое поле , чтобы понять это , что изменилось — так что мы на самом деле не считаем это ключевым событием и действительно не документировать его здесь , Хотя изначально он был определен только для текстовых областей и полей ввода, я полагаю, что есть некоторое движение к его обобщению для стрельбы и по другим типам объектов.

Модификатороы клавиш при обработке событий в Vue

Для события @click поддерживаются клавишные модификаторы, которые ограничат действие события только определенными клавишами. Можно использовать несколько.

Использовать код клавиши:

<!— вызвать `vm.submit()` только если `keyCode` равен 13 —>
<input v-on:keyup.13=»submit»>

Использовать псевдонимы для наиболее распространенных клавиш:

<!— аналогично примеру выше —>
<input v-on:keyup.enter=»submit»>

<!— сразу несколько клавиш —>
<input v-on:keyup.enter.space.tab=»submit»>

<!— Ctrl+Enter —>
<input v-on:keyup.ctrl.enter=»submit»>


<!— работает также и в сокращённой записи —>
<input @keyup.enter=»submit»>

<!— ctrl, shift, alt, meta работают и с событиями мыши —>

<!— Alt + C —>
<input @keyup.alt.67=»clear»>

<!— Ctrl + Click —>
<div @click.ctrl=»doSomething»>Сделать что-нибудь</div>

Список псевдонимов:

  • .enter
  • .tab
  • .delete (ловит как “Delete”, так и “Backspace”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • Клавиши-модификаторы (работают и с событиями клавиатуры, и с событиями мыши):

  • .ctrl
  • .alt
  • .shift
  • .meta
  • Модификаторы клавиш мыши:

  • .left
  • .right
  • .middle

Можно определить пользовательские псевдонимы клавиш через глобальный объект config.keyCodes:

// позволит использовать `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

Модификатор .exact позволяет контролировать точную комбинацию системных модификаторов:

<!— это сработает даже если Alt или Shift также нажаты —>

<button @click.ctrl=»onClick»>A</button>

<!— это сработает только когда нажат Ctrl и не нажаты никакие другие клавиши —>
<button @click.ctrl.exact=»onCtrlClick»>A</button>

<!— это сработает только когда не нажаты никакие системные модификаторы —>
<button @click.exact=»onClick»>A</button>

Документ: событие нажатия клавиши — веб-API

Событие keyup запускается при отпускании клавиши.

События keydown и keyup предоставляют код, указывающий, какая клавиша нажата, а keypress указывает, какой символ был введен. Например, строчная буква «а» будет отображаться как 65 на

нажатие клавиши и нажатие клавиши , но как 97 на нажатие клавиши . Прописная буква «А» отображается как 65 во всех событиях.

Примечание: Если вы ищете способ реагировать на изменения входного значения, вам следует использовать событие input . Некоторые изменения не обнаруживаются клавиатурой , например, вставка текста из контекстного меню в текстовый ввод.

Пример набора клавиш addEventListener

  

Сначала сфокусируйте IFrame (например, щелкнув по нему), затем попробуйте нажать несколько клавиш.

  const log = документ.getElementById ('журнал');

document.addEventListener ('keyup', logKey);

function logKey (e) {
  log.textContent + = `$ {e.code}`;
} 

эквивалент onkeyup

  document.onkeyup = logKey;  

Игнорирование нажатия клавиш во время создания IME

Редактор метода ввода (IME) — это программа, которая позволяет пользователям вводить символы, которые не поддерживаются их клавиатурой, с использованием другой комбинации клавиш.

Начиная с Firefox 65, события keydown и keyup теперь запускаются во время композиции IME, чтобы улучшить кроссбраузерность для пользователей CJKT (ошибка 354358, также см. События keydown и keyup, теперь запускаются во время композиции IME для получения более полезных сведений ).Чтобы игнорировать все события keyup , которые являются частью композиции, сделайте что-то вроде этого (229 — это специальное значение, установленное для

keyCode , относящееся к событию, которое было обработано IME):

  eventTarget.addEventListener ("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    возвращение;
  }
  
});
  

Таблицы BCD загружаются только в браузере

javascript — onKeyPress Vs. onKeyUp и onKeyDown

Эта статья Яна Вольтера — лучшее, что я когда-либо встречал, вы можете найти архивную копию здесь, если ссылка мертва.

Он очень хорошо объясняет все ключевые события браузера,

keydown Событие происходит при нажатии клавиши, за которым сразу следует событие нажатия клавиши. Затем при отпускании клавиши создается событие

keyup .

Чтобы понять разницу между нажатиями клавиш и нажатиями клавиш , полезно различать символов и клавиш . Клавиша — это физическая кнопка на клавиатуре компьютера.Символ — это символ, вводимый нажатием кнопки. На клавиатуре США нажатие клавиши 4 при нажатой клавише Shift обычно приводит к появлению символа «знака доллара». Это не обязательно относится к любой клавиатуре в мире. Теоретически события keydown и keyup представляют собой нажатые или отпускаемые клавиши, а событие keypress представляет вводимый символ. На практике это не всегда так.

Некоторое время некоторые браузеры запускали дополнительное событие, называемое textInput , сразу после нажатия клавиши . Ранние версии стандарта DOM 3 предназначались для замены события keypress , но позже вся идея была отменена. Webkit поддерживал это между версиями 525 и 533, и мне сказали, что IE поддерживает это, но я никогда не обнаружил этого, возможно потому, что Webkit требовал, чтобы он назывался textInput , а IE называл его textinput .

Существует также событие под названием input , поддерживаемое всеми браузерами, которое запускается сразу после внесения изменений в текстовое поле или поле ввода. Обычно срабатывает нажатие клавиши, затем в текстовой области появляется набранный символ, затем срабатывает ввод. Событие input на самом деле не дает никакой информации о том, какой ключ был набран — вам нужно будет проверить текстовое поле, чтобы выяснить, что изменилось — поэтому мы действительно не считаем это ключевым событием и не документируем это здесь.Хотя изначально он был определен только для текстовых полей и полей ввода, я считаю, что есть некоторое движение к его обобщению для использования и для других типов объектов.

HTML | Атрибут события onkeyup

< html >

< head >

Атрибут title >

< style >

h2 {

text-align: center;

цвет: зеленый;

}

h3 {

выравнивание текста: по центру;

}

input [type = text] {

width: 100%;

отступ: 12 пикселей 20 пикселей;

поля: 8px 0;

размер коробки: рамка-рамка;

font-size: 24px;

цвет: белый;

}

p {

font-size: 20px;

}

стиль >

головка > 000 000

< h2 > GeeksforGeeks < h2 >

< h3 > onkeyup Атрибут события p > Отпустите кнопку, чтобы установить зеленый цвет фона. p >

< вход тип = «текст» id = «demo» нажатие клавиши нажатие клавиши () "

onkeyup = " keyupFunction () " >

< скрипт >

документ.getElementById ("демонстрация"). style.backgroundColor = "синий";

}

function keyupFunction () {

document.getElementById ("demo";

}

скрипт >

корпус > 000

9000 000

000 000 »

В атрибутах HTML

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
Атрибут
Атрибуты HTML5 Textarea: вот что вы должны знать
Что делает

Выполнение действий сразу после нажатия клавиши

Событие onkeypress используется для запуска выполнения JavaScript при нажатии любой символьной клавиши, когда выбрано текстовое поле .

Это событие очень похоже на onkeydown и onkeyup , которые также прослушивают нажатия клавиш. Разница в том, что onkeypress слушает только клавиши, которые представляют собой набранные символы, в то время как остальные слушают все события нажатия клавиш. Таким образом, tab, ctrl и shift не будут запускать событие onkeypress , но они будут запускать события onkeydown и onkeyup .

Возьмем, к примеру, следующие текстовые области:

  


  

Вот как эти текстовые области отображаются в браузере. Поиграйте с ними, чтобы понять, как все они работают.

Нажатие таких клавиш, как Shift и Ctrl, в этой текстовой области ничего не даст.Нажмите любую клавишу, когда выделена эта текстовая область, и вы увидите предупреждение. Нажмите и отпустите любую клавишу, когда эта текстовая область выделена, и вы увидите предупреждение.

Адам - ​​технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.

SyntheticEvent - React

В этом справочном руководстве описана оболочка SyntheticEvent , которая является частью системы событий React. См. Руководство по обработке событий, чтобы узнать больше.

Обзор

Вашим обработчикам событий будут переданы экземпляры SyntheticEvent , кроссбраузерной оболочки для собственного события браузера.Он имеет тот же интерфейс, что и собственное событие браузера, включая stopPropagation () и preventDefault () , за исключением того, что события работают одинаково во всех браузерах.

Если вы обнаружите, что по какой-то причине вам нужно базовое событие браузера, просто используйте атрибут nativeEvent , чтобы получить его. Синтетические события отличаются от собственных событий браузера и не сопоставляются с ними. Например, в onMouseLeave event.nativeEvent будет указывать на событие mouseout .Конкретное сопоставление не является частью общедоступного API и может измениться в любое время. Каждый объект SyntheticEvent имеет следующие атрибуты:

  логических пузырей
логическое отменяемое
DOMEventTarget currentTarget
логическое значение по умолчанию
число eventPhase
логическое isTrusted
DOMEvent nativeEvent
void preventDefault ()
логическое isDefaultPrevented ()
void stopPropagation ()
логическое isPropagationStopped ()
пустота сохраняется ()
DOMEventTarget target
число timeStamp
тип строки  

Примечание:

Начиная с версии 17, e.persist () ничего не делает, потому что SyntheticEvent больше не объединяется.

Примечание:

Начиная с версии 0.14, возврат false от обработчика событий больше не останавливает распространение события. Вместо этого e.stopPropagation () или e.preventDefault () следует запускать вручную, в зависимости от ситуации.

Поддерживаемые события

React нормализует события, чтобы они имели согласованные свойства в разных браузерах.

Обработчики событий ниже запускаются событием в фазе восходящей цепочки. Чтобы зарегистрировать обработчик событий для фазы захвата, добавьте Capture к имени события; например, вместо использования onClick вы должны использовать onClickCapture для обработки события щелчка на этапе захвата.


Номер ссылки

События буфера обмена

Имена событий:

Недвижимость:

  DOMDataTransfer clipboardData  

События композиции

Имена событий:

  на СоставКонец на Композиция Начать на Состав Обновление  

Недвижимость:


События клавиатуры

Имена событий:

  onKeyDown onKeyPress onKeyUp  

Недвижимость:

  логический altKey
число charCode
логическое ctrlKey
логическое getModifierState (ключ)
строковый ключ
номер keyCode
строковый языковой стандарт
расположение номера
логический metaKey
логическое повторение
логический shiftKey
номер который  

Свойство ключа может принимать любое из значений, задокументированных в спецификации событий DOM уровня 3.


Основные события

Имена событий:

Эти события фокуса работают со всеми элементами в React DOM, а не только с элементами формы.

Недвижимость:

  DOMEventTarget relatedTarget  
на Focus

Событие onFocus вызывается, когда элемент (или некоторый элемент внутри него) получает фокус. Например, он вызывается, когда пользователь нажимает на ввод текста.

  function Example () {
  возвращение (
    <ввод
      onFocus = {(e) => {
        приставка.log ('Сосредоточен на вводе');
      }}
      placeholder = "onFocus срабатывает, когда вы щелкаете этот ввод".
    />
  )
}  
onBlur

Обработчик события onBlur вызывается, когда фокус покинул элемент (или оставил какой-то элемент внутри него). Например, он вызывается, когда пользователь нажимает кнопку вне выделенного поля ввода текста.

  function Example () {
  возвращение (
    <ввод
      onBlur = {(e) => {
        console.log ('Сработало, потому что этот ввод потерял фокус');
      }}
      placeholder = "onBlur срабатывает, когда вы щелкаете этот вход, а затем щелкаете за его пределами."
    />
  )
}  
Обнаружение входа и выхода фокуса

Вы можете использовать currentTarget и relatedTarget , чтобы различать, происходят ли события фокусировки или размытия от за пределами родительского элемента. Вот демонстрация, которую вы можете скопировать и вставить, в которой показано, как определить фокусировку на дочернем элементе, фокусировку на самом элементе и вход или выход фокуса из всего поддерева.

  function Example () {
  возвращение (
    
{ если (е.currentTarget === e.target) { console.log ('сфокусированный я'); } еще { console.log ('сфокусированный дочерний элемент', e.target); } if (! e.currentTarget.contains (e.relatedTarget)) { console.log ('фокус вошел в себя'); } }} onBlur = {(e) => { if (e.currentTarget === e.target) { console.log («несфокусированное я»); } еще { console.log ('несфокусированный дочерний элемент', e.target); } если (! e.currentTarget.contains (e.relatedTarget)) { console.log ('фокус слева'); } }} > <ввод /> <ввод />
); }

События формы

Имена событий:

  on Change on Input on Invalid on Reset on Submit  

Дополнительные сведения о событии onChange см. В разделе «Формы».


Общие события

Имена событий:


События мыши

Имена событий:

  onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp  

События onMouseEnter и onMouseLeave распространяются от оставленного элемента к элементу, который вводится, вместо обычного всплывания и не имеют фазы захвата.

Недвижимость:

  логический altKey
цифровая кнопка
цифровые кнопки
номер clientX
номер clientY
логическое ctrlKey
логическое getModifierState (ключ)
логический metaKey
номер pageX
номер pageY
DOMEventTarget relatedTarget
номер screenX
номер screenY
логический shiftKey  

События указателя

Имена событий:

  onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut  

События onPointerEnter и onPointerLeave распространяются от оставленного элемента к элементу, который вводится, вместо обычного всплывания и не имеют фазы захвата.

Недвижимость:

Как определено в спецификации W3, события указателя расширяют события мыши со следующими свойствами:

  номер указателя
ширина числа
высота числа
числовое давление
число тангенциальное давление
число tiltX
номер tiltY
поворот числа
string pointerType
логическое isPrimary  

Примечание о кроссбраузерности:

События указателя

еще поддерживаются не всеми браузерами (на момент написания этой статьи поддерживаемые браузеры включают: Chrome, Firefox, Edge и Internet Explorer).React намеренно не поддерживает полифилы для других браузеров, потому что полифил, соответствующий стандарту, значительно увеличит размер пакета react-dom .

Если вашему приложению требуются события указателя, мы рекомендуем добавить полифил событий указателя стороннего производителя.


События выбора

Имена событий:


События касания

Имена событий:

  onTouch Отмена onTouchEnd onTouchПеремещение onTouchStart  

Недвижимость:

  логический altKey
DOMTouchList изменен
логическое ctrlKey
логическое getModifierState (ключ)
логический metaKey
логический shiftKey
DOMTouchList targetTouches
DOMTouchList касается  

События пользовательского интерфейса

Имена событий:

Примечание

Начиная с React 17, событие onScroll не всплывает в React.Это соответствует поведению браузера и предотвращает путаницу, когда вложенный прокручиваемый элемент запускает события для удаленного родителя.

Недвижимость:

  номер детали
DOMAbstractView вид  

События колеса

Имена событий:

Недвижимость:

  номер deltaMode
число deltaX
число deltaY
номер deltaZ  

Медиа События

Имена событий:

  onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange on Waiting  

Изображение События

Имена событий:


Анимационные события

Имена событий:

  onAnimationStart onAnimationEnd onAnimationIteration  

Недвижимость:

  строка animationName
строковый псевдоэлемент
float elapsedTime  

События перехода

Имена событий:

Недвижимость:

  строка propertyName
строковый псевдоэлемент
float elapsedTime  

Другие события

Имена событий:

JavaScript keydown / keyup events: коды клавиш

Ключевые коды событий keydown и keyup

Вопрос: Стандартизированы ли значения keyCode для событий keydown / keyup для разных браузеров?

Ответ: Нет, к сожалению, не все коды клавиш стандартизированы.Например, клавиша минус имеет разные коды клавиш. в разных браузерах. В таблице ниже показано событие . keyCode значения для keydown и keyup событий в Opera 25, Internet Exlorer 11, Firefox 32, Safari 5.1 и Google Chrome 38. Если вас интересуют ключевые коды для старых браузеров (около 2011 г.), см. www.javascripter.net/faq/keycodes2011.htm или, для более старых баузеров, см. Примечание Рабочей группы W3C. Устаревшие свойства событий клавиатуры.Общие коды клавиш, которые относительно безопасно использовать в разных браузерах, показаны черным цветом. Коды клавиш, которые различаются в разных браузерах, показаны красным. Не используйте эту таблицу для кодов символов из нажатия клавиш событий: нажатий клавиш кодов символов не зависят от клавиш и могут сильно отличаться от кодов клавиш нажатий / клавиш.

      keydown / keyup event.keyCode
Opera MSIE Firefox Safari Chrome Клавиша нажата
_________________________________________________________

  8 8 8 8 8 Backspace
  9 9 9 9 9 Вкладка
 13 13 13 13 13 Ввод
 16 16 16 16 16 Смена
 17 17 17 17 17 Ctrl
 18 18 18 18 18 Альт.
 19 19 19 19 19 Пауза, перерыв
 20 20 20 20 20 CapsLock
 27 27 27 27 27 Esc
 32 32 32 32 32 Космос
 33 33 33 33 33 На страницу вверх
 34 34 34 34 34 На страницу вниз
 35 35 35 35 35 Конец
 36 36 36 36 36 Дом
 37 37 37 37 37 Стрелка влево
 38 38 38 38 38 Стрелка вверх
 39 39 39 39 39 Стрелка вправо
 40 40 40 40 40 Стрелка вниз
         44 44 44 44 PrntScrn (см. Ниже )
 45 45 45 45 45 Вставка
 46 46 46 46 46 Удалить
 48-57 48-57 48-57 48-57 48-57 0 до 9
 65-90 65-90 65-90 65-90 65-90 От А до Я
 91 91 91 91 91 Клавиша WIN (Пуск)
 93 93 93 93 93 93 WIN Меню
112-123 112-123 112-123 112-123 112-123 F1 - F12
144 144 144 144 144 NumLock
145 145 145 145 145 Замок прокрутки

188 188 188 188 188,
191 191 191 191 191 /?
192 192 192 192 192 192 `~
219 219 219 219 219 [{(см. Ниже )
220 220 220 220 220 \ |
221 221 221 221 221]}
222 222 222 222 222 '"
 
В большинстве браузеров нажатие клавиши PrntScrn вызывает keyup событий.
Код ключа 219 также соответствует ключу Win (Пуск) в старые версии Opera.

Следующие коды клавиш различаются в разных браузерах:

 keydown / keyup event.keyCode
Opera MSIE Firefox Safari Chrome Клавиша нажата
_________________________________________________________

173 173 181 173 173 Без звука Вкл. | Выкл.
174 174 182 174 174 Уменьшение громкости
175 175 183 175 175 Увеличение громкости
186 186 59 186 186; :
187 187 61 187 187 = +
189 189 173 189 189 - _
 
Цифровая клавиатура может выдавать разные коды клавиш в зависимости от состояния NumLock:
 Все вышеперечисленные браузеры (NumLock On / Off) Нажата клавиша
__________________________________________________________

            96/45 Numpad 0 Ins
            97/35 Numpad 1 - конец
            98/40 Numpad 2 вниз
            99/34 Numpad 3 Pg Down
           100/37 Numpad 4 влево
           101/12 Numpad 5
           102/39 Numpad 6 Вправо
           103/36 Numpad 7 - главная
           104/38 Numpad 8 вверх
           105/33 Numpad 9 Pg вверх
           106/106 Цифровая клавиатура *
           107/107 Numpad +
           109/109 Numpad -
           110/46 Numpad.Del
           111/111 Numpad /
 

Смотрите также:
• Какие свойства событий я могу использовать для анализа событий клавиатуры?
• Какую кнопку нажал пользователь?
• Какой символ ввел пользователь?
• Объект KeyEvent (предварительно определенные константы кода клавиш в Firefox)

событий - keydown, keypress, keyup

Events - keydown, keypress, keyup

нажатие клавиши, нажатие клавиши, нажатие клавиши

События keydown, keypress и keyup срабатывают, когда пользователь нажимает клавишу.

нажатие
Срабатывает, когда пользователь нажимает клавишу. Он повторяется, пока пользователь удерживает нажатой клавишу.
нажатие клавиши
Срабатывает, когда фактический символ вставляется, например, в текстовый ввод. Он повторяется, пока пользователь удерживает нажатой клавишу.
клавиатура
Срабатывает, когда пользователь отпускает клавишу, после после было выполнено действие по умолчанию для этой клавиши.
ввод текста
Срабатывает, когда персонаж фактически добавляется к элементу управления.Итак, если пользователь нажимает клавишу символа, но по умолчанию запрещается onkeydown или onkeypress, событие textinput запускается , а не , так как последовательность не приводит к добавлению символа.

Схема keydown / keypress, описанная выше, изначально является изобретением Microsoft, которое Safari 3.1 скопировал по причинам объяснил Алексей Проскуряков из команды Safari.

Большим преимуществом этой теории является то, что она ясно объясняет, почему нам нужно, чтобы keydown и keypress были двумя отдельными событиями; без какой-либо разницы между этими двумя событиями довольно бессмысленно держать их оба.

Между тем спецификация тоже перешел к этой схеме вещей. Firefox и Opera до сих пор не понимают этого, но они просто ошибаются.

На окне

Нет Есть Есть Есть Есть Есть

Доступны ли эти события в окне?

На документе

Есть Есть Есть Есть Есть

Эти события доступны в документе?

По форме

Есть Есть Есть Есть Есть

Доступны ли эти события в форме?

На фокусируемых элементах

Есть Есть Есть Есть Есть

Важным моментом этих событий является мониторинг ввода текста пользователем.

Ключевые события на других элементах, на которые можно сфокусироваться, таких как ссылки, переключатели и т. Д. не имеют для меня особого смысла, но все браузеры их поддерживают.

Специальные ключи

Когда пользователь нажимает специальные клавиши, такие как клавиши со стрелками, браузер НЕ должен запускать события нажатия клавиш.

Есть Incor Прямо Есть Есть Incor Прямо
Я тестировал это с помощью клавиш со стрелкой влево и Shift.В обоих случаях должно срабатывать только событие keydown.
  • Firefox и Opera запускают событие нажатия клавиши, если клавиша что-то меняет в текстовом поле (например, клавиша со стрелкой влево: перемещает курсор). Если ключ ничего не меняет (например, клавиша Shift), они не запускают нажатие клавиш.

Повторяет

Когда пользователь удерживает нажатой клавишу, события нажатия клавиши и нажатия клавиши, если применимо, должен работать непрерывно.

Есть Есть Есть Есть Incor Прямо
Я тестировал это с тремя ключами:
  1. Клавиша с символом «d»: всегда должна повторяться.
  2. Клавиша со стрелкой влево: всегда должна повторяться.
  3. Левая клавиша Shift: эта клавиша повторяется в Windows 7 (кроме Opera), но не на Mac. Не повторять это имеет смысл, поэтому я не осуждаю браузеры. Однако имейте в виду, что некоторые специальные клавиши могут не повторяться.
  • Opera повторяет только событие нажатия клавиши, которое не должно запускаться даже при нажимается специальная клавиша.

Событие всплывающее

Событие должно всплыть.

Есть Есть Есть Есть Есть

Предотвратить нажатие клавиши по умолчанию

Есть Есть Есть Есть
Я тестировал это с двумя ключами:
  1. Клавиша с символом «d»: не должна появляться.
  2. Клавиша со стрелкой влево: курсор не должен двигаться.

Запрет нажатия клавиш по умолчанию

Нельзя предотвращать неиспользование специальных ключей

Есть Incor Прямо Есть Есть Incor Прямо
Я тестировал это с двумя ключами:
  1. Клавиша с символом «d»: не должна появляться.
  2. Клавиша со стрелкой влево: курсор должен переместиться на . Событие нажатия клавиши не должно огонь тут вообще - теоретически.
  • Firefox и Opera позволяют предотвратить использование специальных клавиш по умолчанию.

Запретить ввод по умолчанию

«Нет» - правильный ответ
Я тестировал это с двумя ключами:
  1. Символьная клавиша «d»: должна появиться.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *