Ruby on Rails: Comment ajouter du texte d'espace réservé à un f.text_field?

144

Comment puis-je ajouter du placeholdertexte à mes f.text_fieldchamps afin que le texte soit pré-écrit par défaut, et lorsqu'un utilisateur clique à l'intérieur des champs, le texte disparaît - permettant à l'utilisateur de taper le nouveau texte?

NullVoxPopuli
la source
HTML5 prend en charge cela. En attendant, il existe des solutions javascript .
ghoppe
3
Je suggère d'ajouter la réponse de nslocum au lieu de la mienne. Son est correct pour les rails 3.
Chuck Callebs

Réponses:

269

Avec des rails> = 3.0, vous pouvez simplement utiliser l' placeholderoption.

f.text_field :attr, placeholder: "placeholder text"
nslocum
la source
4
L'attribut "placeholder" n'est pris en charge que par les navigateurs prenant en charge HTML5, en excluant les navigateurs comme Internet Explorer.
travis-146
1
L'URL correcte pour le correctif jQuery est hagenburger.net/BLOG/…
szeryf
1
@KDP: Cela semble être la même chose dans Rails 2, bien que vous puissiez avoir besoin de l'ancienne syntaxe d'attribut:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
Est-il possible d'ajouter un long texte - peut-être en tant que fichier html séparé - comme espace réservé? J'essaie de fournir un modèle aux utilisateurs pour écrire leur contenu.
sofarsophie
32

Dans Rails 4 (avec HAML):

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

Pour ceux qui utilisent Rails (4.2) Internationalisation (I18n):

Définissez l'attribut d'espace réservé sur true:

f.text_field :attr, placeholder: true

et dans votre fichier local (ie. en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
la source
Merci qui a fonctionné. Je n'ai pas défini le placeholder: true. Après avoir réglé cela comme vous l'avez décrit, cela a fonctionné.
Hendrik
2

Voici une syntaxe beaucoup plus claire si vous utilisez rails 4+

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

Vous rails 4+pouvez donc maintenant utiliser cette syntaxe au lieu de la syntaxe de hachage

Abhilash
la source
1
En quoi est-ce différent de la réponse @nslocum acceptée?
mlt
@mlt La réponse acceptée a été mise à jour comme similaire après avoir fourni cette réponse.
Abhilash
2

J'ai essayé les solutions ci-dessus et cela ressemble à des rails 5. * le deuxième agument par défaut est la valeur du formulaire d'entrée, ce qui a fonctionné pour moi était:

text_field_tag :attr, "", placeholder: "placeholder text"
Prosper Opara
la source
1

Dans votre modèle de vue, définissez une valeur par défaut:

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

Dans votre Javascript (en supposant jquery ici):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
la source
1
Le champ de recherche du Huffington Post utilise ce bit de JS à l'intérieur de l'élément d'entrée: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Cela semble être une bonne approche.
Nathan