0

背景

我有一个活动组件，它基本上是一个带有几个text inputs 和一个提交按钮的表单。我的界面看起来有点像我想要的方式，但是有一个问题：我无法在文本输入字段中输入任何内容。

我不知道为什么。

代码

如您所见，我有 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问题不会发生。

不过，我的应用程序中确实有巨大的空白（因为divs 刚刚淡出，它们没有被删除），这是另一个问题。

问题

  • 为什么我的 CSS 弄乱了文本输入字段？
  • 我怎样才能解决这个问题？
4

1 回答 1

1

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

https://hexdocs.pm/phoenix_live_view/form-b​​indings.html

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

要使用纯 HTML，它必须使用正确的 id 和 name，如下所示。

<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}>

如果输入表单在任何情况下都无法单击，则可能它位于其他元素的后面。请尝试style="z-index: 1000 !important;"在表单或输入标签中添加 z-index 样式。

于 2022-01-22T12:34:11.500 回答