読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

google.maps.places.Autocompleteの不具合対応

Mobile Safari上でGoogle MapsのplacesライブラリのAutocompleteを使う場合、日本語変換の後にEnterを押すと変換前に戻ってしまいます。デスクトップでは起こりません。
デスクトップとMobile Safariの差を調べると、IME変換に対応するtextInputイベントの後に、デスクトップではEnterのkeydown, keyupイベントが起こるのに対して、Mobile Safariでは起こりませんでした。
そこで対症療法ですが、textInputイベントでkeydown, keyupをエミュレートすることで、不具合に対応できました。

    $('input.places-auto').on 'keydown', -> $(this).data 'keydown', true
    $('input.places-auto').on 'keyup', -> $(this).data 'keydown', false        
    $('input.places-auto').on 'textInput', ->
        unless $(this).data 'keydown' # if textInput without keydown
            for event in ['keydown', 'keyup']
                e = document.createEvent 'KeyboardEvent'
                e.initKeyboardEvent event, true, true, window, 'Enter', 0, ''
                this.dispatchEvent(e)

本質とは無関係なのでタグは入れていませんが、上記コードはCoffeeScriptjQueryを使用しています。