如何让 JS onpaste 事件与 Rails 表单一起工作？

Question

我有一个搜索表单，希望它能在我将内容粘贴到表单中时自动提交表单。 我还想保留功能，所以如果我不粘贴某些东西，而是手动输入它，我必须按输入/搜索按钮才能工作。

这是我的表格：

<h1 class = "CustomerTitle">Search Tool</h1>
<%= form_with url: "/support/search_res", class: "form", method: :get do |form| %>
  <%= form.text_field :query, class: "input", placeholder: "Search for a user..." %>
  <%= form.submit "Search", class: "submit_button", id: "pasteSubmit", onpaste: 'pasteAndGo()' %>
<% end %>

<script>
  function pasteAndGo() { 
    document.getElementById('pasteSubmit').submit(); 
  }
</script>

有人能告诉我为什么这不起作用吗？

编辑：我试过 Sercan Tırnavalı 的方法：

<h1 class = "CustomerTitle">Revuto Customer Support Tool</h1>
<%= form_with url: "/support/search_res", class: "form", onpaste: 'pasteAndGo()', method: :get do |form| %>
  <%= form.text_field :query, class: "input", placeholder: "Search for a user..." %>
  <%= form.submit "Search", class: "submit_button" %>
<% end %>

<script>
  function pasteAndGo() { 
    document.getElementsByClassName('form')[0].submit(); 
  }
</script>

没有任何进展。 任何其他想法/解决方案表示赞赏。

Answer 1

我相信你把onpaste放在了错误的地方。 请试试这个：

<h1 class = "CustomerTitle">Revuto Customer Support Tool</h1>
<%= form_with url: "/support/search_res", class: "form", method: :get do |form| %>
  <%= form.text_field :query, class: "input", placeholder: "Search for a user...", onpaste: 'pasteAndGo()' %>
  <%= form.submit "Search", class: "submit_button" %>
<% end %>

<script>
  function pasteAndGo() { 
    document.getElementsByClassName('form')[0].submit(); 
  }
</script>

Answer 2

您应该 select 表格并提交，而不是按钮。

<script>
  function pasteAndGo() { 
    document.getElementsByClassName('form')[0].submit(); 
  }
</script>

您也可以将此 js 库用于此类型的功能https://select2.org/data-sources/ajax