비어있을 때 HTML 텍스트 상자에 힌트를 표시하려면 어떻게해야합니까?

웹 페이지의 검색 창에 "검색"이라는 단어가 회색 기울임 꼴로 표시되기를 원합니다. 상자에 초점이 도착하면 빈 텍스트 상자처럼 보입니다. 텍스트가 이미 있으면 텍스트를 정상적으로 표시해야합니다 (검정, 비 이탈리아어). 라벨을 제거하면 혼란을 피할 수 있습니다.

BTW, 이것은 페이지상의 Ajax 검색이므로 버튼이 없습니다.

최신 브라우저에서만이 기능을 사용할 수있는 다른 옵션은 HTML 5의 자리 표시 자 속성이 제공하는 지원을 사용하는 것입니다.

<input name="email" placeholder="Email Address">

스타일이 없으면 Chrome에서 다음과 같이 보입니다.

당신은 밖으로 데모를 시도 할 수 있습니다 여기에 와있는 CSS와 HTML5 자리 표시 자 스타일링 .

이 기능 의 브라우저 호환성 을 확인하십시오 . Firefox 지원은 3.7에서 추가되었습니다. 크롬은 괜찮습니다. Internet Explorer는 10에서만 지원을 추가했습니다. 입력 자리 표시자를 지원하지 않는 브라우저를 대상으로하는 경우 jQuery HTML5 자리 표시 자라는 jQuery 플러그인 을 사용하고 다음 JavaScript 코드를 추가하여 활성화 할 수 있습니다.

$('input[placeholder], textarea[placeholder]').placeholder();

이를 텍스트 상자 워터 마크라고하며 JavaScript를 통해 수행됩니다.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

또는 jQuery를 사용하는 경우 훨씬 더 나은 방법입니다.

• http://digitalbush.com/projects/watermark-input-plugin/
• 또는 code.google.com/p/jquery-watermark

HTML 의 속성 을 사용 하여 자리 표시자를 설정할 수 있습니다 ( 브라우저 지원 ). 와는 할 수 CSS로 변경 (브라우저 지원이 제한되어 있지만).placeholderfont-stylecolor

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

특수 CSS 클래스를 추가 및 제거하고 입력 값을 onfocus/ onblurJavaScript로 수정할 수 있습니다 .

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

그런 다음 CSS에서 원하는 스타일 로 힌트 클래스를 지정 하십시오.

input.hint {
    color: grey;
}

가장 좋은 방법은 jQuery 또는 YUI 와 같은 일종의 JavaScript 라이브러리를 사용하여 JavaScript 이벤트를 연결하는 것입니다. 와 연결하고 외부 .js 파일에 코드를 넣는 것입니다.

그러나 빠르고 더러운 솔루션을 원한다면 이것이 인라인 HTML 솔루션입니다.

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

업데이트 : 요청한 채색 물을 추가했습니다.

얼마 전에 내 웹 사이트 에이 솔루션을 게시 했습니다 . 사용하려면 단일 .js파일을 가져 오십시오 .

<script type="text/javascript" src="/hint-textbox.js"></script>

그런 다음 CSS 클래스에 힌트를 줄 입력에 주석을 답니다 hintTextbox.

<input type="text" name="email" value="enter email" class="hintTextbox" />

자세한 정보 및 예는 여기에서 확인할 수 있습니다 .

다음은 Google Ajax 라이브러리 캐시와 일부 jQuery 매직이 포함 된 기능적인 예입니다.

이것은 CSS 일 것입니다 :

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

이것은 JavaScript 코드 일 것입니다 :

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

그리고 이것은 HTML이 될 것입니다 :

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

GAJAXLibs와 jQuery에 모두 관심을 갖기를 바랍니다.

이제는 매우 쉬워졌습니다. html에서는 입력 요소에 자리 표시 자 속성을 제공 할 수 있습니다 .

예 :

<input type="text" name="fst_name" placeholder="First Name"/>

자세한 내용을 확인하십시오 : http://www.w3schools.com/tags/att_input_placeholder.asp

jQuery 사용자의 경우 : naspinski의 jQuery 링크가 끊어진 것처럼 보이지만 다음을 시도하십시오 : http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

무료 jQuery 플러그인 튜토리얼을 보너스로받습니다. :)

jQuery 플러그인 jQuery Watermark 가 최상위 답변에 나열된 것보다 낫다는 것을 알았습니다 . 왜 더 좋아? 비밀번호 입력 필드를 지원하기 때문입니다. 또한 워터 마크 (또는 다른 속성)의 색상을 설정하는 .watermark것은 CSS 파일에서 참조 를 만드는 것만 큼 쉽습니다 .

이것을 "워터 마크"라고합니다.

첫 번째 답변과 달리 추가 설정이 필요없는 jQuery 플러그인 jQuery 워터 마크 를 찾았습니다 (원본 답변은 양식을 제출하기 전에 특별한 호출이 필요합니다).

사용 jQuery를 양식 알리미 -가장 인기있는 jQuery 플러그인 중 하나이며 여기에있는 다른 jQuery 제안 중 일부 버그로 고통받지 않습니다 (예 : 워터 마크가 저장 될지 걱정하지 않고 워터 마크를 자유롭게 스타일링 할 수 있음) 데이터 베이스).

jQuery Watermark는 양식 요소에서 단일 CSS 스타일을 직접 사용합니다 (워터 마크에 적용된 CSS 글꼴 크기 속성도 텍스트 상자에 영향을 미쳤습니다. jQuery Watermark의 장점은 텍스트를 필드로 드래그 앤 드롭 할 수 있다는 것입니다 (jQuery Form Notifier에서는 허용하지 않음).

다른 사람 (digitalbrush.com에있는 사람)이 제안한 또 다른 방법은 실수로 워터 마크 값을 양식에 제출하므로 강력히 권장하지 않습니다.

배경 이미지를 사용하여 텍스트를 렌더링하십시오.

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

그런 다음 value == 0올바른 클래스를 감지 하고 적용하기 만하면됩니다.

 <input class="foo fooempty" value="" type="text" name="bar" />

그리고 jQuery JavaScript 코드는 다음과 같습니다.

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

상자에 "검색"이라고 표시 한 다음 포커스가 변경되면 텍스트가 제거됩니다. 이 같은:

<input onfocus="this.value=''" type="text" value="Search" />

물론 그렇게하면 사용자가 클릭 할 때 사용자 자신의 텍스트가 사라집니다. 따라서 더 강력한 것을 사용하고 싶을 것입니다.

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

페이지가 처음로드 될 때 텍스트 상자에 원하는 경우 검색이 회색으로 표시됩니다.

입력 상자가 포커스를 받으면 검색 상자에서 모든 텍스트를 선택하면 사용자가 입력을 시작할 수 있으므로 프로세스에서 선택한 텍스트가 삭제됩니다. 이전 텍스트를 수동으로 강조 표시하여 삭제할 필요가 없기 때문에 사용자가 검색 상자를 두 번째로 사용하려는 경우에도 잘 작동합니다.

<input type="text" value="Search" onfocus="this.select();" />

나는 "지식 Chikuse"의 솔루션을 좋아합니다-간단하고 명확합니다. 페이지로드가 준비되면 초기 상태를 설정하는 흐림 호출을 추가하기 만하면됩니다.

$('input[value="text"]').blur();

onfocus에 다음과 같은 것을 할당하려고합니다.

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

그리고 이것은 onblur에 :

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(원하는 경우 클래스 이름 전환을 위해 프레임 워크 함수와 같이 조금 더 영리한 것을 사용할 수 있습니다.)

다음과 같은 CSS가 있습니다.

input.placeholder{
    color: gray;
    font-style: italic;
}

나는 잘 작동하는 간단한 한 줄 자바 스크립트 솔루션을 사용하고 있습니다. 다음은 텍스트 상자와 텍스트 영역 모두에 대한 예입니다.

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

필드의 값을 가진 작업을 수행하기 전에 $ _POST 또는 Javascript 유효성 검사로 유효성을 검사하는 것이 "단점"입니다. 의미, 필드 값이 "텍스트"가 아닌지 확인.

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

간단한 HTML '필수'태그가 유용합니다.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

양식을 제출하기 전에 입력 필드를 작성하거나 제출 단추를 누르도록 지정합니다. 여기에 예가 있습니다

http://asp.net의 사용자 AJAXToolkit