2012-05-02 1 views
0

입력 텍스트에 회색으로 표시된 기본 텍스트를 원합니다. 그러나 사용자는이 텍스트를 선택할 수 없어야하며 삭제가 불가능합니다.자바 스크립트의 기본 텍스트 (예 : tumblr)

예 :

사용자 유형 이름 Susan. 타이핑을 멈 추면 SusanCartel과 같이 나타납니다. 회색 부분이 미리보기로 자동 표시됩니다. 그런 다음 그들이 히트했을 때 우리는 SusanCartel을 볼 것입니다. 이런 식으로 사람들은 SusanCartelCartel을 입력하면 미리보기가 표시되기 때문에 실수로 입력하지 않아도됩니다.

<label for="username">Username:</label> 
<input type="text" name="username" id="username" placeholder="Type your username..." /> 

그러나이 IE 또는 이전 버전의 브라우저에서 작동하지 않습니다 :

+0

원하는 사운드를 m Google 순간 검색과 같이 자동 완성 결과를 텍스트 상자에 표시합니다. http://stackoverflow.com/questions/6336094/jquery-autocomplete-in-background-of-input-text-box 및 http://stackoverflow.com/questions/5376956/make-part-of- inputtext-gray –

+0

@close voter -이 질문은이 질문과 중복되지 않습니다. –

+0

@Rory : 틀린 링크를 얻었습니다, 다른 사람들은 아마도 맞을 것입니다 ... –

답변

2

HTML5는 새로운 placeholder 당신이 사용할 수있는 특성이있다.

This plugin 브라우저 간 효과가 동일합니다.

+0

-> 미안 해요 실수로 downvote를 누르십시오. –

+0

OP는 일부 인스턴트 텍스트가 아닌 Google 순간 검색과 같은 입력란에 정보를 자동 완성하려고합니다. 그래도 질문은 다소 모호합니다. –

+0

실제로 사용자가 텍스트 상자를 클릭하면 "카르텔"이라는 단어가 자동으로 입력 상자에 나타나야합니다. "카르텔"이라는 단어는 선택 및 편집하거나 삭제할 수 없습니다. – Rashtra

1

나는 보통 jquery-watermark를 사용합니다. 자세한 내용은 plugin 링크를 확인하십시오.

사용법 : 당신은 신중하게 소개를 읽으면

$('#inputid').watermark('Required information', {className: 'myClassName'}); 

는 또한, 당신은 기본적으로 HTML5 "자리"기능을 지원

이 시점 건너 것이다 (브라우저에서 그 지원이) 또는 기본 지원을 사용 중지하여 플러그인 이 모든 워터 마크를 제어하도록

+0

네이티브 html5 자리 표시자를 사용하지 않는 이유는 무엇입니까? –

+1

가능하지만 CANT가 HTML5를 지원하는 브라우저를 처리합니다. –

관련 문제