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

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?

ruby-on-rails

— NullVoxPopuli
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

269

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

f.text_field :attr, placeholder: "placeholder text"

— nslocum
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
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
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
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
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
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

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