제이쿼리 input 요소에 따라 값을 바꾸기 keydown.keyup

추가디테일 만들기 

검색창에 x버튼을 누르면 지워지고 포커스를 가게 하자 

 

---

 var searchInput = $('#header .search_wrap .input_wrap input[type=text]');

 

기존에 만든 변수를

클리어 버튼에다 같은 변수를 사용해 주시위해 함수 밖으로 빼준다.

 

 

 

 자주사용하는 #header .search_wrap .btn_clear  변수로 담아서 사용하자 

  var btnClear = $('#header .search_wrap .btn_clear');

---

 

1.  #header .search_wrap .btn_clear' btnClear  클릭시 searchInput 에 val()을 빈칸으로 초기화

 

 

 

 

 

 btnClear.on('click', function () {

    searchInput.val('');

 

 

 

 

 

---

2. searchInput focus 강제발생

 

.trigger('focus');  추가

 

  btnClear.on('click', function () {

    searchInput.val('').trigger('focus');

---

3.  #header .search_wrap .btn_clear  안보이게

 

  btnClear.on('click', function () {

    searchInput.val('').trigger('focus');

    $(this).hide();

 

이벤트 걸린 '#header .search_wrap .btn_clear'  btnClear 를 this 로 선택 

 

---

4 키보드 입력시  다시 btnClear 나오게

 

  searchInput.on('keydown', function () {

    btnClear.show();

 

키보드 함수
keydown	키보드가 눌려서 입력될때
keyup	백스페이스로 지워질때

 

---

5. 백스페이스로 글자 지우다가  searchInput의 val ()이 빈칸일때 
#header .search_wrap .btn_clear  안보이게

 

lf문 을 사용하여 키보드 백스페이스로 지워지며 ' ' 빈칸이 되면 버튼을 없애라.

 

  searchInput.on('keyup', function () {

    if (searchInput.val() === '') {

      btnClear.hide();

    }

더 간단하게

  searchInput.on('keyup', function () {

    btnClear.show();

    if (!searchInput.val()) {

      btnClear.hide();

    }

if (searchInput.val() === '') 를  if (!searchInput.val()  변경할 수 있다.

  // 검색모달 입력필드 초기화
  var btnClear = $('#header .search_wrap .btn_clear');

  btnClear.on('click', function () {
    searchInput.val('').trigger('focus');
    $(this).hide();
  });

  searchInput.on('keyup', function () {
    btnClear.show();
    if (searchInput.val() === '') {
      if (!searchInput.val()) {
        btnClear.hide();
      }
    }
  });