Ruby on Rails : f.text_field에 자리 표시 자 텍스트를 어떻게 추가합니까?


144

텍스트가 기본적으로 미리 작성되고 필드 내부를 클릭하면 텍스트가 사라져 새 텍스트를 입력 할 수 있도록 필드 에 placeholder텍스트를 추가하는 방법은 f.text_field무엇입니까?


HTML5 지원합니다. 그 동안 자바 스크립트 솔루션이 있습니다.
ghoppe

3
내 대신 nslocum의 답변을 추가하는 것이 좋습니다. 레일즈 3에
맞습니다.

답변:


269

rails> = 3.0이면 간단히 placeholder옵션을 사용할 수 있습니다.

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

4
"자리 표시 자"특성은 Internet Explorer와 같은 브라우저를 제외하고 HTML5 지원 브라우저에서만 지원됩니다.
travis-146

1
jQuery 수정에 대한 올바른 URL은 hagenburger.net/BLOG/…입니다.
szeryf

1
@KDP : Rails 2에서도 마찬가지인 것 같습니다. 이전의 속성 구문이 필요할 수도 있습니다.f.text_field :attr, :placeholder => "placeholder text"
mwfearnley

자리 표시 자로 긴 텍스트 (별도의 html 파일)를 추가 할 수 있습니까? 사용자가 자신의 콘텐츠를 쓸 수있는 템플릿을 제공하려고합니다.
sofarsophie

32

Rails 4 (HAML 사용)에서 :

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

15

Rails (4.2) 국제화 (I18n)를 사용하는 경우 :

플레이스 홀더 속성을 true로 설정하십시오.

f.text_field :attr, placeholder: true

로컬 파일 (예 : en.yml)에서 :

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

고마워요. 설정하지 않았습니다 placeholder: true. 설명대로 설정하면 효과가 있습니다.
Hendrik

2

다음을 사용하면 훨씬 더 깨끗한 구문이 있습니다. rails 4+

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

그래서 rails 4+이제 해시 구문 대신이 구문을 사용할 수 있습니다


1
허용되는 @nslocum 답변과 어떻게 다릅니 까?
mlt December

@mlt이 답변을 제공 한 후 수락 된 답변이 유사한 것으로 업데이트되었습니다.
Abhilash

2

위의 솔루션을 시도했지만 레일 5 에서처럼 보입니다. * 기본적으로 두 번째 주장은 입력 양식의 값입니다.

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

1

보기 템플리트에서 기본값을 설정하십시오.

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

자바 스크립트에서 (jquery 가정) :

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

1
Huffington Post의 검색 필드는 입력 요소 내에서이 비트의 JS를 사용합니다 onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post". 좋은 접근 방식 인 것 같습니다.
Nathan
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.