Hi, I would like some advice on keyboard input. When could I use HTML events and when could I use Browser.events. What are the pros and cons?
Do I have to use Browser.events for example if dynamically creating text boxes in SVG such as to allow a user to add a label to a diagram wherever they want?
I am assuming that Browser.events is more general than Html.events and covers everything that Html.events can do.
Finally is it a bad idea to use both in the same program?
PS I also asked this on Slack beginners.
Hello and welcome to this community!
What events exactly do you have in mind? The events declared in
Html.Events don’t overlap that much.
Usually you’d want those in
Html.Events attached to some element/node in your site/DOM and the ones in
Browser.Events are global (not associated with some node - or with the browser-window if you like).
I would like to be able to have something like a form users can fill in and the ability for users to add labels to diagrams wherever they choose
On first glance filling in form-fields should be via
For the labels it might depend on how you want to draw the diagrams - are those Images and do you want to place the labels as HTML elements with positioning via attributes? Then maybe
Browser.onMouseDown for the clicks - but I think this will get nasty with calculation.
Or are you using a SVG? Then it’s pack to HTML-Events (or SVG events - probably defining your own so that you can get the coordinates from the
You would use
Browser.Events when you don’t care about the active context in the DOM. While
Html.Events are localised and are executed in the context of the element.
For example, you can use
Html keyboard events when you are implementing Select Menu and you want to capture
ArrowDown and move hovered item to next in a list for the focused Select Menu.
You would use
Browser keyboard events when you don’t care about the context. The only thing what matters is that user pressed particular key. For example, if user presses ctrl+s, you want to open search panel. Irrespective which element is focused in the UI.
HI Carsten, yes I am trying svg text as well. I am just not able right now to see how I can make it accept user keyboard input like I can with pure html.
I have been looking both at Svg.text_ and Svg.foreignObject but neither have been able to accept use keyboard input the same way as with html directly.
if it’s no input-element the browser will likely trigger
input events. In this case use the global from
Browser - clicks should work though.
I usually avoid
Browser.Events.onKeyDown altogether, since it does not prevent the default action: Way to `preventDefault` on `Browser.Events` needed · Issue #89 · elm/browser · GitHub
When I’ve needed a global key listener, I’ve done it with a port instead.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.