자바스크립트 기초 - addEventListener(focus, blur)

<input type="text" id="event" autocomplete="off" value="이름을 입력하세요" >

<script type="text/javascript">
  var k = document.getElementById("event");
  k.addEventListener("focus" , function(e) {
      if(k.value=="이름을 입력하세요") {
        k.value = "";
      }
  });
  k.addEventListener("blur", function(e) {
    if(k.value =="") {
      k.value = "이름을 입력하세요";
    }
  });

마우스 클릭에 따른 값 변경시키기

<input type="text" id="event" autocomplete="off" value="이름을 입력하세요" >

인풋에 기본 밸류값으로 "이름을 입력하세요"를 지정합니다. id는 "event"

*aucautocomplete="off" 자동완성끄기

 

html 실행

클릭시

아래의 스크립트를 통해 클릭시 기본 밸류값을 없애고 외부영역에서 클릭시 다시 기본밸류값을 나타나게 합니다.

<script type="text/javascript">
  var k = document.getElementById("event");
  k.addEventListener("focus" , function(e) {
      if(k.value=="이름을 입력하세요") {
        k.value = "";
      }
  });
  k.addEventListener("blur", function(e) {
    if(k.value =="") {
      k.value = "이름을 입력하세요";
    }
  });