Ruby on Rails: come posso aggiungere testo segnaposto a un campo f.text_?


144

Come posso aggiungere del placeholdertesto ai miei f.text_fieldcampi in modo che il testo venga pre-scritto per impostazione predefinita e quando un utente fa clic all'interno dei campi, il testo scompare, consentendo all'utente di digitare il nuovo testo?


HTML5 supporta questo. Nel frattempo, ci sono soluzioni javascript .
ghoppe,

3
Suggerisco di aggiungere la risposta di nslocum invece della mia. È corretto per Rails 3.
Chuck Callebs,

Risposte:


269

Con rotaie> = 3.0, puoi semplicemente usare l' placeholderopzione.

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

4
L'attributo "segnaposto" è supportato solo dai browser che supportano HTML5, tralasciando browser come Internet Explorer.
travis-146,

1
L'URL corretto per la correzione di jQuery è hagenburger.net/BLOG/…
szeryf

1
@KDP: sembra essere lo stesso in Rails 2, anche se potresti aver bisogno della vecchia sintassi dell'attributo:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley,

È possibile aggiungere un testo lungo, magari come file html separato, come segnaposto? Sto cercando di fornire un modello per gli utenti in cui scrivere i loro contenuti.
Sofarsophie,

32

In Rails 4 (utilizzando HAML):

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

15

Per coloro che utilizzano l'internazionalizzazione di Rails (4.2) (I18n):

Impostare l'attributo segnaposto su true:

f.text_field :attr, placeholder: true

e nel tuo file locale (es. en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"

Grazie ha funzionato. Non ho impostato il placeholder: true. Dopo aver impostato quello che hai descritto ha funzionato.
Hendrik,

2

Ecco una sintassi molto più pulita se si utilizza rails 4+

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

Quindi rails 4+ora puoi usare questa sintassi invece della sintassi hash


1
In che cosa differisce dalla risposta @nslocum accettata?
mlt

@mlt La risposta accettata è stata aggiornata a simile dopo aver fornito questa risposta.
Abhilash,

2

Ho provato le soluzioni sopra e sembra su rotaie 5. * il secondo documento di default è il valore del modulo di input, quello che ha funzionato per me è stato:

text_field_tag :attr, "", placeholder: "placeholder text"

1

Nel modello di visualizzazione, imposta un valore predefinito:

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

Nel tuo Javascript (supponendo jquery qui):

$(document).ready(function() {
  //add a handler to remove the text
});

1
Il campo di ricerca di Huffington Post utilizza questo bit di JS all'interno dell'elemento di input: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"sembra un buon approccio.
Nathan,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.