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

비어있을 때 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

---

For jQuery users: naspinski's jQuery link seems broken, but try this one: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

You get a free jQuery plugin tutorial as a bonus. :)

---

I found the jQuery plugin jQuery Watermark to be better than the one listed in the top answer. Why better? Because it supports password input fields. Also, setting the color of the watermark (or other attributes) is as easy as creating a .watermark reference in your CSS file.

---

This is called "watermark".

I found the jQuery plugin jQuery watermark which, unlike the first answer, does not require extra setup (the original answer also needs a special call to before the form is submitted).

---

Use jQuery Form Notifier - it is one of the most popular jQuery plugins and doesn't suffer from the bugs some of the other jQuery suggestions here do (for example, you can freely style the watermark, without worrying if it will get saved to the database).

jQuery Watermark uses a single CSS style directly on the form elements (I noticed that CSS font-size properties applied to the watermark also affected the text boxes -- not what I wanted). The plus with jQuery Watermark is you can drag-drop text into fields (jQuery Form Notifier doesn't allow this).

Another one suggested by some others (the one at digitalbrush.com), will accidentally submit the watermark value to your form, so I strongly recommend against it.

---

Use a background image to render the text:

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

Then all you have to do is detect value == 0 and apply the right class:

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

And the jQuery JavaScript code looks like this:

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

---

You could easily have a box read "Search" then when the focus is changed to it have the text be removed. Something like this:

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

Of course if you do that the user's own text will disappear when they click. So you probably want to use something more robust:

<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">

---

When the page first loads, have Search appear in the text box, colored gray if you want it to be.

When the input box receives focus, select all of the text in the search box so that the user can just start typing, which will delete the selected text in the process. This will also work nicely if the user wants to use the search box a second time since they won't have to manually highlight the previous text to delete it.

<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;
}

---

$('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

참고 URL : https://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty