Prevent the Return key from submitting while composing using an IME

Based on the following article by Michael Stum:
https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
This commit is contained in:
Karina Kwiatek 2020-04-25 14:35:04 +01:00
parent 445d9ebe2a
commit d13f1cf7b8
1 changed files with 18 additions and 0 deletions

View File

@ -13,8 +13,14 @@ $(document).on "click", "button[name=ab-comments]", ->
commentBox.slideUp()
btn[0].dataset.state = 'hidden'
isComposing = false
compositionHasJustEnded = false
$(document).on "keyup", "input[name=ab-comment-new]", (evt) ->
if isComposing or compositionHasJustEnded
compositionHasJustEnded = false
return
input = $(this)
aid = input[0].dataset.aId
ctr = $("span#ab-comment-charcount-#{aid}")
@ -49,6 +55,18 @@ $(document).on "keyup", "input[name=ab-comment-new]", (evt) ->
complete: (jqxhr, status) ->
input.removeAttr 'disabled'
# IME Return key handling
$(document).on "compositionstart", "input[name=ab-comment-new]", (evt) ->
isComposing = true
$(document).on "compositionend", "input[name=ab-comment-new]", (evt) ->
isComposing = false
compositionHasJustEnded = true
$(document).on "keydown", "input[name=ab-comment-new]", (evt) ->
# 229 is a special keyCode for events processed by an IME
# https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event
compositionHasJustEnded = false unless event.which == 229
# character count
$(document).on "input", "input[name=ab-comment-new]", (evt) ->