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

Question

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

这是我的表格：

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

没有任何进展。任何其他 ideas/solutions 表示赞赏。

Answer 1

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

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

您也可以使用此 js 库实现此类功能https://select2.org/data-sources/ajax

Answer 2

我相信你把 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>

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

How to have JS onpaste event work with Rails form?

javascript

ruby

forms

ruby-on-rails

onpaste