728x90 반응형 jQuery12 [jQuery] textarea 크기 자동으로 늘리는 방법 textarea를 사용하다 보면 textarea 공간은 작은데 글을 쓰면 옆에 스크롤이 생기고 내가 손수 크기를 키워주려니 너무 귀찮고,불편하고 "내가 글을 작성한 만큼 textarea 크기가 자동으로 커지면 안 되나?"라는 생각 한 번쯤 해보셨다면 잘 찾아오셨습니다. 이번 포스팅으로 textarea에 입력된 글만큼 자동으로 크기가 조절되는 방법을 알아보겠습니다. 자동으로 늘어나는 textarea 만들기 먼저 html로 textarea를 간단하게 하나 만들어 줍니다. 현재 textarea박스는 기본으로 제공하는 박스로 글을 작성하면 위의 이미지와 같이 스크롤바가 생성되고,이전 작성 내용들은 보이지 않게 위로 올라가게 됩니다. 이제 자동으로 textarea의 크기를 늘려줄 함수를 작성합니.. 2024. 6. 15. [javascript] "변경사항이 저장되지 않을 수 있습니다" 경고창 안나오게 하기 (onbeforeunload) 사이트에서 무언가 작업을 하거나, 작성을 하다가 페이지를 벗어나려 할 때,"페이지를 벗어나시겠습니까? 변경사항이 저장되지 않을 수 있습니다"라는 경고창을 보신 분들 꽤 많을 것입니다. 이 경고창이 필요할 때 제때 잘 나와주면 실수로 페이지 벗어나는 것도 방지되고 좋지만,메인페이지나, 정보를 수정하고 저장버튼을 눌렀을 때 저런 메시지가 나온다면 헷갈릴 수 있겠죠.내가 수정한 정보들이 저장되지 않는다는 뜻처럼 보이니까요. 이럴 때 onbeforeunload 이벤트를 사용하여 메시지를 나오지 않게 처리한다거나,혹은 해당 메시지를 출력하게 설정할 수 있습니다. onbeforeunload 이벤트? onbeforeunload 이벤트는 보통 페이지를 벗어날 때 발생하는 이벤트입니다.예를 들어 새로고침.. 2023. 4. 21. [jQuery] 클릭하지 않고 클릭 이벤트 발생 시키는 방법 웹페이지를 작성하다 보면, 하나의 버튼을 클릭했을 때 다른 버튼도 함께 동작하면 좋겠다 싶은 때가 있습니다.혹은, 순차적으로 이벤트가 발생해야 될 때가 있습니다.이럴 때마다 이미 작성해 두었던 이벤트를 다시 코딩해서 적는 건 너무 비효율 적입니다.그때 사용하면 좋은 메서드인 trigger에 대해서 알아보도록 하겠습니다. trigger 이벤트란? . trigger 이벤트는 click와 같은 javaScript 이벤트 유형을 포함하는 문자열입니다.트리거 이벤트는 트리거 이벤트 작동을 선언하기 전에 앞에서 이벤트 핸들러가 정의되어 있어야 합니다. 예를 들어 클릭 이벤트를 트리거를 사용하여 동작시키고 싶다면,클릭이벤트에 관한 코드를 먼저 작성해 주어야 합니다.코드는 순차적으로 실행되니 트리거 이벤트 위에.. 2023. 4. 19. [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의 슬라이드 애니메이션에 대해서 자세히 알아보도록 하겠습니다. 먼저, jQuery에는 3가지 슬라이드 효과를 줄 수 있는 메서드가 있습니다.3가지 슬라이드 효과의 종류는 아래와 같습니다. slideDown()slideUp()slideToggle() slideDown은 아래로 슬라이드 되는 것이고, slideUp는 위로 슬라이드 되는 것입니다.slideToggle는 클릭할 때의 상태에 따라 위로 혹은 아래로 슬라이드 됩니다. $(selector). slideToggle(speed, callback); 문법은 위와 같이 사용합니다. speed 위치에는 "slow", "fast" 또는 밀리초가.. 2023. 3. 9. 이전 1 2 다음 728x90 반응형
