4

我想创建一个没有标签的表单，而是将方向放在实际输入文本字段中。当您单击文本字段时，我还希望方向消失。

这是一个示例 http://www.dailyblogtips.com/wp-content/uploads/searchform.png

我知道在 html 中，你做这样的事情

<input type="text" name="s" id="s" value="Text to be displayed here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

但是我怎样才能使用 rails form helpers 来实现这一点。

这是我到目前为止所拥有的

  <div class="row">
    <div class="small-12 columns">
      <div class="panel">
        <%= form_for(@message) do |f| %>
            <%= f.label :body, "Description" %>
            <%= f.text_area :body %>
            <%= f.submit 'Create message', class: 'button small secondary' %>
        <% end %>
      </div>
    </div>
  </div>
4

2 回答 2

6

我会尝试使用占位符属性，它只适用于较新的浏览器，但有一些 jQuery 库会自动检测不支持它的库，并执行或多或少与您的 javscript 片段相同的事情是正在做。以下是使用占位符字段的示例：

<%= f.text_field :field_name, :placeholder => "Disappearing Text" %>

编辑：这是一个可靠的 jQuery 后备插件：

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

于 2013-05-07T18:51:41.997 回答
0

在 html 中，输入中的前置文本称为placeholder属性。

您可以将该属性添加到form_for循环字段中，如下所示：

<%= f.text_field :some_data, :placeholder => "value" %>

但是，在执行占位符属性时，请注意它在某些浏览器的旧版本中并不完全受支持。因此，通常需要一些 JS 来填充此功能……如果您不使用输入字段旁边的传统标签，您应该关心支持这一点。

于 2013-05-07T20:00:02.253 回答