본문 바로가기
728x90
반응형

제이쿼리12

[jQuery] number와 정규식을 활용하여 input 박스에 숫자만 입력 가능하게 하는 법 모바일로 텍스트 박스를 터치했을 때,키보드가 한글, 영문으로 변경이 불가능하고 숫자 키보드만 나오는 경험 해보신 적 있을 것입니다. 마찬가지로 PC에서도 "숫자만 입력하세요"라는 박스에,영어나 한글 특수문자 등을 사용하려 해도 입력되지 않게 설정되어 있는 것들도 있습니다. 오늘은 이렇게 숫자만 입력받아서 처리해주어야 하는 상황에서 다른 문자는 입력하지 못하게 하는 방법을 알아보려 합니다.     input type="number"를 사용하는 방법  먼저 가장 간단한 방법입니다.   input type을 number로 지정해 두면 숫자만 입력 가능하게 됩니다.단점은 문자 하나 입력하고 다른 곳 클릭하고 와서 또 입력하고 하면 한 글자씩은 입력이 되는 것입니다. 숫자만 입력하랬는데 이렇게 문자를 굳이 입력하.. 2023. 4. 12.
[jQuery] 애니메이션이나 효과를 중지 시키는 stop() 개요  이전 포스팅에서 아래로 슬라이드와 위로 슬라이드, 트리거 사용을 해보았는데요.이번에는 슬라이드 같은 애니메이션을 사용할 때 애니메이션을 나는 그만보고 싶다. 혹은 웹게임을 만들 때, 움직이는 몬스터들에게 꼼짝 못 하게 하는 기능 등 이런저런 상황에서 사용될 수 있는 제이쿼리의 stop() 메서드에 대해서 알아보도록 하겠습니다.   동작 화면   동작하는 이미지는 위와 같습니다.아래로 슬라이드를 눌러서 슬라이드 애니메이션이 작동중일 때,슬라이드 멈추기 버튼을 누르면 작동하는 중간에 애니메이션이 멈추게 됩니다.  코드 이전에 사용했던 슬라이드 애니메이션을 활용하여 stop() 메서드를 사용해 보겠습니다. 슬라이드 멈추기아래로 슬라이드위로 슬라이드Hello world!  슬라이드 멈추기 버튼 아래로 슬.. 2023. 3. 31.
[jQuery] 정규식을 활용한 이메일과 비밀번호 유효성 검사 소개 이메일과 비밀번호를 입력하는 웹페이지가 있다는 가정하에 양식을 제출하기 전에 jQuery를 사용하여 사용자 입력의 유효성을 검사한다고 가정해 보겠습니다. 특히 사용자가 특정 기준을 충족하는 유효한 이메일 주소와 암호를 입력했는지 확인하려고 합니다. 이를 위해 양식에서 제출 이벤트를 수신하는 jQuery 함수를 작성한 다음 이메일 및 비밀번호 입력 필드의 값을 확인합니다.필드가 비어 있거나 지정된 기준을 충족하지 않는 경우 함수는 오류 메시지를 표시하고 양식이 제출되지 않도록 합니다.   코드 $(document).ready(function() { // 양식에서 제출 이벤트 수신 $('form').submit(function(event) { // 이메일 및 비밀번호 입력 필드의 값 가져오기.. 2023. 3. 3.
[jQuery] confirm 확인과 취소, div 값 변경 자바스크립트에서 alert를 사용하여 경고창을 띄울 수 있습니다.하지만 alert는 사용자에게 메시지를 전달하는 기능일 뿐 사용자가 true와 false를 선택할 수 없습니다.이 글에서는 true와 false를 선택할 수 있는 confirm 함수에 대해서 살펴보도록 하겠습니다.   confirm 이란?  confirm 함수는 alert 함수와 비슷하게 경고창을 띄워주는 함수입니다. 예를 들어,로그인할 때 "비밀번호가 틀렸습니다!" 같은 메시지는 alert로 보내주면 됩니다. 하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우,예, 아니요를 선택 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다.  .. 2023. 2. 13.
728x90
반응형