Question

我在文本框中放置了放大镜图像，以便用户可以单击此按钮开始搜索。目前，如果按“Enter”键，则执行搜索功能，但也需要点击事件。

这是我的HTML和CSS，因为它是

<form accept-charset="UTF-8" action="/blog" class="searchPosts" method="get">
  <input id="search" name="search" placeholder="Search Here" type="text" />      
</form>


.searchPosts {
  background:url("/assets/bg_dots_grey.png") repeat;
}

#search {
 background:url('/assets/search.png') no-repeat right;
 padding-right:0px;
}

Ruby生成表单

<%= form_tag blog_path, :method => 'get', :class => 'searchPosts'  do %>
  <%= text_field_tag :search, params[:search], :placeholder => 'Search Here' %>
<% end %>

请注意，没有submit_tag，因为我不希望用户点击按钮来执行请求。

我是否需要重新添加submit_tag并使用css设置样式以适合输入字段？或者这是jQuery解决方案的案例？如果不是我怎么会这样做？

任何帮助一如既往的

Answer 1

现在，您表单中的所有内容都是文本框中的图片，通过css的background属性。不会接受点击事件。创建一个提交按钮，并使用“放大镜”属性而不是标准按钮属性对其进行样式设置。

将按钮放在文本字段中只是在css中相对定位的问题。请搜索有关详细信息。

拥有<button type="submit" class="magGlass"></button>将允许点击它并触发提交事件。

单击图像以启动搜索Rails

1 个答案: