텍스트 입력을위한 자리 표시 자로 텍스트?

Question

http://academia.edu/과 같은 일부 웹 사이트의 가입 양식에는 텍스트 입력란에 "place-holder"가 있습니다. 텍스트 상자에는 레이블이 없지만 텍스트 상자 안에 약간의 글꼴 "이름"단어가 있습니다. 조사 방화범을 사용하는 경우

, 나는 다음과 같은 코드를 볼 : 일부 "마법"자바 스크립트는 장면 뒤에 발생이처럼

<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name"> 

것 같습니다. 하지만 아직 자바 스크립트 디버깅에 익숙하지 않아서 어떻게 그렇게하는지 추적 할 수는 없습니다.

그 효과를 얻는 방법을 아는 사람이 있습니까?

Answer 1

최신 브라우저의 경우 HTML5 placeholder 속성을 사용할 수 있습니다.

자바 스크립트를 사용하지 않고도 결과를 얻을 수 있으며 이전 브라우저에서는 크기가 조정됩니다 (아무 것도하지 않음).

http://diveintohtml5.info/forms.html :

$('input:text').focus(function(){ 
    if ($(this).val() === $(this).attr ('placeholder')) { 
     $(this).val(''); 
    } 
}).blur(function(){ 
    if($(this).val() == "") 
    { 
     $(this).val($(this).attr('placeholder')) 
    } 
} 
); 

Working Example

Answer 2

입력란에 대해 "onFocus"이벤트 처리기를 만들고 해당 입력란의 값을 지워야합니다. 물론 값을 기본값 (예 : "First Name")으로 만 지우면 나중에 입력으로 돌아 가면 입력 한 사용자를 지우지 않습니다.

"onBlur"이벤트 핸들러를 연결하고 입력 상자의 값을 기본값으로 복원 할 수도 있습니다 (사용자가 아무 것도 입력하지 않은 경우).

Answer 3

HTML5 자리는 당신이 찾고있는 무엇 :

<input placeholder="First Name"> 

당신이 jQuery를 약간을 포함 할 수 있습니다 이전 버전의 브라우저에서 작업이를 얻으려면

귀하의 경우에는 :

<input name="firstname" placeholder="First name"> 

그러나 또한 100 % 자바 스크립트로 작업을 수행 할 수 있습니다

http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

Answer 4

<input id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name" onFocus="inputFocus('First Name', this)" onBlur="inputBlur('First Name', this)"> 
<script type="text/javascriptt"> 
    function inputFocus(ph, el){ 
    if(el.value == ph) 
     el.value = ""; 
    } 
    function inputBlur(ph, el){ 
    if(el.value == "") 
     el.value = ph; 
    } 
</script>