更新实时取景时如何保持输入焦点?

Question

我有一个实时视图，当用户更新表单元素中的文本输入时，它会添加一个带有typing...p标签。我希望它在用户模糊文本输入时删除typing..。

<section class="phx-hero">
<%= if @typing do %>
<p>typing...</p>
<% end %>
<form phx-change="typing" phx-submit="send-message">
<input type="text" phx-blur="stopped-typing" name="msg" value="<%= @msg %>" placeholder="Send message..."/>
<button type="submit" phx-disable-with="Sending...">Submit</button>
</form>
</section>

事件的处理方式为：

@impl true
def mount(_params, _session, socket) do
{:ok, assign(socket, typing: false, msg: "")}
end
@impl true
def handle_event("send-message", %{"msg" => msg}, socket) do
{:noreply, assign(socket, msg: msg)}
end
@impl true
def handle_event("typing", %{"msg" => msg}, socket) do
{:noreply, assign(socket, typing: true, msg: msg)}
end
@impl true
def handle_event("stopped-typing", _, socket) do
{:noreply, assign(socket, typing: false)}
end

问题是，当我最初在输入框中键入时，它会失去焦点，我必须单击它才能继续键入。

Answer 1

我想出了一个解决方法：

我不得不将<p>typing...</>包裹在父容器中

<div>
<%= if @typing do %>
<p>typing...</p>
<% end %>
</div>

我认为 DOM 补丁section在添加"键入..."段。