0

I made use of the https://github.com/jaridmargolin/formatter.js library in my project and discovered it is not working properly on mobile devices.

My research showed that this is due to it's use of keypress which is evil and should not be used. So I decided to modify it and use "beforeinput" whenever available. And here lies the problem, how do I detect whether it is available?

I tried this methode: https://stackoverflow.com/a/2877424/13987708

But it doesn't work.

My Internet search only showed me a bunch of different veriations of the same methode when checking for detecting supported events in a browser. And I can see that this method most of the times works. it even works for the "input" event, but unfortunatly not for the "beforeinput" event.

I would love to find a way that does not rely on the user agent, as that is, so I'm told, very unrelyable.

// EDIT

Well, I did research the issue, I even say so in my question :duh:...

The situation is that "keypress" is deprecated and should not be used anymore, in fact in Chrome for Android it doesn't even fire anymore.

The above mentioned plugin to format user input relies on the methode, though.

So I went ahead and replaced it with the "keyup" methode, which indeed fires in Chrome for Android, but only gives a keyCode of 229, so it doesn't work either.

I dug a bit deeper into this whole keyboard events and found that modern browsers support the "beforeinput" event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).

Which is awesome, it gives you so much mor information about the interaction between the user and your input.

So I adapted the formatter to use the "beforeinput" event instead of "keypress", but my project has to support IE, which does not support "beforeinput".

That's why I need a way to detect if the browser supports this event, and use either the "keypress" or the "beforeinput" depending on the capabilities of the users browser.

And I am aware that a browser might support functionality which the user won't use, but it's not relevant for this use case, I just need to know if the browser will fire the "beforeinput" event or not.

Christian
  • 427
  • 3
  • 7
  • 1
    Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. I have not even heard of beforeinput so it must be possible to not use that. Sounds like an X/Y problem – mplungjan Nov 25 '20 at 16:19
  • `'onbeforeinput' in HTMLInputElement.prototype`. As `HTMLInputElement` is a function, `in` operator doesn't serach the correct prototype, but finds the property from the prototype (or doesn't find, if the property doesn't exist). Not probably working in very old browsers, like IE<8. In general, detecting the existence of an event is not that simple, ex. desktop browsers have usually defined all touch events, though they're not firing when not connected to a touch device. – Teemu Nov 25 '20 at 18:28

0 Answers0