웹 프론트 개발
-
[Jquery] toggleclass 작동 안 함 not working웹 프론트 개발 2021. 10. 24. 18:08
$(".showMore").on("click", function() { $(this).toggleClass("expanded"); }); 클래스의 클릭 이벤트를 캐치하여 expanded라는 클래스가 없으면 넣어주고, 있으면 없애는 간단한 코드가 작동 안 하는 현상을 발견했습니다. 클릭 이벤트도 정상적으로 발동하고 addClass는 또 되는 것 같고 이것저것 알아보다 알아낸 사실은 $(this)로 잡아준 앨리먼트에 showMore이라는 다른 클래스가 있어서 그런 것 같더라고요. showMore을 id로 수정하면 정상 작동이 되는데 여러번 반복되는 엘리먼트가 있어서 id로는 지정해줄 수 없어 상위 div를 만들어 showMore이라는 클래스를 넣어주고 children()을 통해 p태그에 expanded를 추..
-
[Jquery] Input 숫자만 입력받기, 최대 글자수 지정하기 (numbers only, max length)웹 프론트 개발 2021. 9. 27. 14:52
기본적으로 HTM의 input은 tel이라는 타입이 존재하며 maxlength를 설정할 수 있다. type="tel"을 사용하면 모바일에서 해당 방식으로 표시되며 PC에서는 숫자외에 한글, 영문, 특수문자 등이 입력되지 않는다. 또한 maxlength 이상으로 숫자를 입력할 수 없다. 하지만 이 방식을 통과하는 케이스가 있다. 직접 입력하는 것이 아니라 복사, 붙여넣기를 하거나 자동완성을 이용하는 경우이다. 이런 케이스까지 방지하기 위해서는 아래처럼 input에 입력이 들어왔을 때 value를 체크하여 숫자가 아닌 문자를 모두 ""로 바꿔주면 된다. this.value = this.value.replace(/[^0-9\.]/g,""); 로 바꿔서 사용할 수 있다. $("#phoneInput").keyup..
-
[Jquery] form 초기화, input 전체 초기화웹 프론트 개발 2021. 8. 31. 15:22
id 혹은 class를 사용하여 특정 form 초기화 $("#id")[0].reset(); $(".class")[0].reset(); form 전체 초기화 $('form').each(function() { this.reset(); }); 주의할 점 reset() 메서드는 form 객체에서 제공하는 표준 메서드이다. 아래와 코드와 같이 reset() 메서드 사용시 오류가 발생한다. $("form").reset(); $("#id").reset();