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?


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"

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'

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"

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


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"

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
});

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.