Ruby on Rails: ¿Cómo agrego texto de marcador de posición a f.text_field?

144

¿Cómo puedo agregar placeholdertexto a mis f.text_fieldcampos para que el texto venga previamente escrito de manera predeterminada, y cuando un usuario hace clic dentro de los campos, el texto desaparece, lo que permite al usuario escribir el nuevo texto?

NullVoxPopuli
fuente
HTML5 es compatible con esto. Mientras tanto, hay soluciones de JavaScript .
ghoppe
3
Sugiero agregar la respuesta de nslocum en lugar de la mía. La suya es correcta para Rails 3.
Chuck Callebs

Respuestas:

269

Con rieles> = 3.0, simplemente puede usar la placeholderopción.

f.text_field :attr, placeholder: "placeholder text"
nslocum
fuente
44
El atributo "marcador de posición" solo es compatible con los navegadores compatibles con HTML5, dejando de lado a los navegadores como Internet Explorer.
travis-146
1
La URL correcta para la corrección de jQuery es hagenburger.net/BLOG/…
szeryf
1
@KDP: Parece ser lo mismo en Rails 2, aunque es posible que necesite la sintaxis del atributo anterior:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
¿Es posible agregar un texto largo, tal vez como un archivo html separado, como marcador de posición? Estoy tratando de proporcionar una plantilla para que los usuarios escriban su contenido.
sofarsophie
32

En Rails 4 (usando HAML):

=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'
Zoltan
fuente
15

Para aquellos que usan Rails (4.2) Internacionalización (I18n):

Establezca el atributo de marcador de posición en verdadero:

f.text_field :attr, placeholder: true

y en su archivo local (es decir, en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
fuente
Gracias que funcionó. No puse el placeholder: true. Después de configurar eso como lo describiste, funcionó.
Hendrik
2

Aquí hay una sintaxis mucho más limpia si usa rails 4+

<%= f.text_field :attr, placeholder: "placeholder text" %>

Así rails 4+que ahora puede usar esta sintaxis en lugar de la sintaxis hash

Abhilash
fuente
1
¿En qué se diferencia de la respuesta @nslocum aceptada?
mlt
@mlt La respuesta aceptada se actualizó a similar después de proporcionar esta respuesta.
Abhilash
2

Probé las soluciones anteriores y parece que está en los rieles 5. * El segundo elemento por defecto es el valor del formulario de entrada, lo que funcionó para mí fue:

text_field_tag :attr, "", placeholder: "placeholder text"
Prospera Opara
fuente
1

En su plantilla de vista, establezca un valor predeterminado:

f.text_field :password, :value => "password"

En su Javascript (suponiendo que jquery aquí):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
fuente
1
El campo de búsqueda de Huffington Post utiliza este bit de JS dentro del elemento de entrada: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"parece un buen enfoque.
Nathan