If you want to capture each key individually, yes.

This requires a form input. I am curious why specifically you wish to avoid this. I can give you a working example (using an ancient Symbol LS1900 barcode scanner to demonstrate ):

Here’s the code:

defmodule HelloWeb.ScanLive do
  use HelloWeb, :live_view

  def render(assigns) do
    ~H"""
    <form id="form" phx-submit={JS.push("capture") |> JS.push_focus(to: "#input")}>
      <input
        id="input"
        data-count={@count}
        type="text"
        name="code"
        autofocus
        phx-debounce="blur"
        placeholder="Scan barcode..."
        value=""
        class="w-full"
      />
      <button class="hidden" type="submit">Submit</button>
    </form>

    <ul>
      <li :for={code <- @codes}><%= code %></li>
    </ul>
    """
  end

  def mount(_, _, socket) do
    socket = socket |> assign(:count, 0) |> assign(:codes, [])
    {:ok, socket}
  end

  def handle_event("capture", %{"code" => code}, socket) do
    IO.inspect(code)

    socket =
      socket
      |> update(:count, &(&1 + 1))
      |> update(:codes, &[code | &1])

    {:noreply, socket}
  end
end

Usually there are (at least) two tricky parts. The first is clearing and re-focusing the input after the form submits. You can use a combination of JS.push() and JS.push_focus() to submit the form and re-focus the input. To ensure the input is cleared after submit, you need to force the input to re-render. In this case I am setting a data-count attribute and incrementing the count on each submit. This will force LiveView to re-render the input with the empty value provided on the element.

The other tricky part is that barcode scanners don’t always send an Enter key as a suffix. I left the phx-debounce="blur" on the input because you will definitely want that if you try to add a phx-change event to the form. Since LiveView won’t re-render focused inputs on change, you would probably want to push an event from the server and use it to reset the input value.

that’s so cool!