无法在 LiveComponent 的文本字段中输入文本

Question

背景

我有一个实时组件，它基本上是一个带有几个 text input 和一个提交按钮的表单。我的界面有点像我想要的样子，但有一个问题：我无法在文本输入字段中输入任何内容。

我不知道为什么。

代码

如您所见，我有 2 个文本输入字段。

我的代码如下：

defmodule WebInterface.Live.Window.Main.Authenticate do
  @moduledoc """
  LiveView subcomponent for the Authenticate page as part of the Main subcomponent.
  This subcomponent has the forms for the user's authentication.
  """

  use WebInterface, :live_component

  alias Elixir.Phoenix.LiveView.Rendered

  @spec render(map) :: Rendered.t
  def render(assigns) do
    ~H"""
      <div class="header">
        <h2>Description</h2>
        <p><%= @selected_command.description %></p>
      </div>
      <div class="body">
        <form>
          <div class="intro">
            <h3>Authentication</h3>
            <p>Fill the Cookie and token. Lorem Ipsum.</p>
          </div>
          <label for="cookie">Cookie: </label>
          <input type="text" id="cookie" name="cookie"/>

          <label for="token">Token: </label>
          <input type="text" id="token" name="token"/>
        </form>
        <button
          phx-click="execute_command"
          phx-value-command={@selected_command.id}
          >
            Save
        </button>
      </div>
    """
  end

end

起初我以为这是因为我没有使用 text_input，但是，用它替换 <input type="text" id="cookie" name="cookie"/> 后，同样的事情发生了。

CSS

经过更多调查，我发现文本输入无法正常工作，因为 CSS 代码：

.hidden {
    opacity: 0;
    height: 0px;
}

.show {
  opacity: 1;
  transition: opacity 0.6s linear;
}

相反，如果我使用 Phoenix 的内置 CSS 类 fade-in 和 fade-out，问题就不会发生。

虽然我的应用程序中确实有大量空白（因为 div 只是淡出，它们没有被删除），这是另一个问题。

问题

为什么我的 CSS 弄乱了文本输入字段？
我该如何解决这个问题？

Answer 1

如有关表单绑定的文档中所述：“要处理 real-time 表单验证和保存，您的模板将同时使用 phx_change 和 phx_submit 绑定”

https://hexdocs.pm/phoenix_live_view/form-bindings.html

但是，如果您只需要“保存”，则可以使用phx-submit。

要使用普通 HTML，它必须使用正确的 ID 和名称，如下所示。

<form id="auth-form" method="post" phx-submit="save">
  <div class="intro">
    <h3>Authentication</h3>
    <p>Fill the Cookie and token. Lorem Ipsum.</p>
  </div>
  <label for="auth-form_cookie">Cookie: </label>
  <input type="text" id="auth-form_cookie" name="auth[cookie]"/>

  <label for="auth-form_token">Token: </label>
  <input type="text" id="auth-form_token" name="auth-form[token]"/>
  <button phx-disable-with="Saving..." type="submit">Save</button>
</form>

按钮必须在表单标签内。

如果您需要隐藏输入，也将其放在表单标签内：

<input id="auth-form_command_id" name="auth-form[command_id]" type="hidden" value={@selected_command.id}>

如果输入框无论如何都无法点击，可能是在其他元素后面。请尝试在表单或输入标签中添加 z-index 样式 style="z-index: 1000 !important;"。

无法在 LiveComponent 的文本字段中输入文本

Cannot input text in text field from LiveComponent

elixir

phoenix-framework

phoenix-live-view

背景

代码

CSS

问题