trisolaran
Hello! I hope you’re all enjoying your summer! (or winter if you live in the southern hemisphere)
Suppose I have a key event binding on a text input field in a form in liveview:
<%= text_input(@form, "text_input", phx_keyup: "keyup" %>
I can handle the key event in my live view code easily. However, hitting certain keys may trigger some unwanted default action in the browser. For example, hitting “Enter” may trigger a form submit.
I can prevent these default actions using client hooks. I can capture the key event in JS and then call event.preventDefault() before sending the event to my liveview using pushEvent(). Although this works, it is less clean and more complex than doing everything in liveview.
So my questions are:
- Can browser’s default actions be prevented directly in LV without using client hooks? I suspect this is not possible.
- If it’s not possible, would it make sense to add a LV binding that disables default actions? Something like:
phx-prevent-default. Would anybody else find this useful? If not, why?
Thanks for any comment!
Where Next?
Trending in Questions
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #ai
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
mindok
Ha - found this looking for a solution. So looks like it will be a hook unless someone has a better idea…
trisolaran
Thanks. If you find a better way to do it I’d be interested
Xty
One approach that I have used in the past to get around the “Submit form on enter” is described in this StackOverflow post: https://stackoverflow.com/a/51507806
It boils down to placing a disabled invisible submit button before a visible submit button in the DOM, which will prevent the form from submitting on Enter.
trisolaran
@Xty yes that works thanks. It’s a good old trick
However, that requires the ability to modify the form. My use case is a bit different: I’m developing an input component that will be used as a library by others, and I would like the component to be able to say “don’t submit on enter” because it uses the enter key as part of its internal behavior. Hooks work fine for that, and as far as I know, they are the only option for now.
user20230119
This worked for me.