2012-02-04 3 views
2

사용자가 스크립트를 클릭 할 때 텍스트 상자를 확인하고 "여기에 정보를 추가하십시오!"라는 값이 있으면 스크립트에서 확인하고 싶습니다. 상자를 공백으로 만들고 텍스트 색상을 # 000으로 변경하십시오. 그것은 회색으로 시작합니다.기본 자바 스크립트 기능이 작동하지 않습니다.

changeMessage()의 맥락에서 자바 스크립트

function changeMessage() { 
    if(this.value=='Add additional information here!') 
      {this.value='';this.style.color='#000';} 
} 

HTML

<textarea name="message" id="message_input" rows="4" cols="21" maxlength="200" 
      onfocus="changeMessage();" 
      onblur="changeMessageBack();" 
      >Add additional information here!</textarea> 

답변

2

, this 텍스트 영역을 참조하지 않습니다. 이처럼 텍스트 영역 객체를 전달하십시오 :

JS를 :

<textarea name="message" id="message_input" rows="4" cols="21" maxlength="200" 
      onfocus="changeMessage(this);" 
      onblur="changeMessageBack(this);" 
      >Add additional information here!</textarea> 

여기 입증하는 a working fiddle

function changeMessage(obj) { 
    if(obj.value=='Add additional information here!') { 
     obj.value=''; 
     obj.style.color='#000'; 
    } 
} 

HTML.

추가 정보 :

+0

. 나는 이것이 항상 그 속에있는 요소를 가리키는 것이라고 생각했다. – noWayhome

+0

@noWayhome : 그렇습니다. 그러나 당신의''changeMessage (this); ''는 익명의 함수의 몸체가되므로'this'가 요소를 참조하는 * this * 함수에 있습니다. 다른 함수 내부에서 함수를 호출 할 때 JavaScript는 현재 값으로 호출하는 함수에서'this'를 자동으로 설정하지 않습니다. 수동으로해야합니다. @xdazz의 [answer] (http://stackoverflow.com/a/9143288/1106925)는 어떻게 작동하는지 보여줍니다. –

2

thiswindow 객체를 의미합니다. 또한 자바 스크립트없이 자리 표시 자 속성을 사용할 수 있습니다 onfocus="changeMessage();"

+0

+1은'.call()'에 +1합니다. –

+0

@JamesHill : 설명을 제공하지 않아도 대답을 아래로 투표하려면 왜이 대답을 사용해야합니까? 왜 아무 설명도하지 않은 다른 대답에 대해 투표를하지 않았습니까? –

+0

@JamesHill 당신 말이 맞아요. 설명을 추가했습니다. :) – xdazz

1

onfocus="changeMessage.call(this);"

변경 : 작동 나중에

<input type="text" name="the_name" placeholder="Add additional information here!">

관련 문제