728x90 반응형 jQuery12 [jQuery] textarea 크기 자동으로 늘리는 방법 서문 텍스트에리어를 사용하다 보면 textarea 공간은 작은데 글을 쓰면 옆에 스크롤이 생기고 내가 손수 크기를 키워주려니 너무 귀찮고, 불편하고 "내가 글을 작성한 만큼 textarea 크기가 자동으로 커지면 안되나?" 라는 생각 한 번쯤 해보셨다면 잘 찾아오셨습니다. 이번 포스팅으로 textarea에 입력된 글만큼 자동으로 크기가 조절되는 방법을 알아보겠습니다. 자동으로 늘어나는 textarea 만들기 먼저 html로 textarea를 간단하게 하나 만들어 줍니다. 현재 textarea박스는 기본으로 제공하는 박스로 글을 작성하면 위의 이미지와 같이 스크롤바가 생성되고 이전 작성 내용들은 보이지 않게 위로 올라가게 됩니다. 이제 자동으로 textarea의 크기를 늘려줄 함수를 작성합니다. fu.. 2024. 6. 15. [javascript] "변경사항이 저장되지 않을 수 있습니다" 경고창 안나오게 하기 (onbeforeunload) 서문 사이트에서 무언가 작업을 하거나, 작성을 하다가 페이지를 벗어나려 할 때, "페이지를 벗어나시겠습니까? 변경사항이 저장되지 않을 수 있습니다"라는 경고창을 보신 분들 꽤 많을 것입니다. 이 경고창이 필요할 때 제때 잘 나와주면 실수로 페이지 벗어나는 것도 방지되고 좋지만, 메인페이지나, 정보를 수정하고 저장버튼을 눌렀을 때 저런 메시지가 나온다면 헷갈릴 수 있겠죠. 내가 수정한 정보들이 저장되지 않는다는 뜻처럼 보이니까요. 이럴 때 onbeforeunload 이벤트를 사용하여 메시지를 나오지 않게 처리한다거나, 혹은 해당 메시지를 출력하게 설정할 수 있습니다. 본문 onbeforeunload 이벤트? onbeforeunload 이벤트는 보통 페이지를 벗어날 때 발생하는 이벤트입니다. 예를 들어 새로.. 2023. 4. 21. [jQuery] 클릭하지 않고 클릭 이벤트 발생 시키는 방법 서문 웹페이지를 작성하다 보면, 하나의 버튼을 클릭했을 때 다른 버튼도 함께 동작하면 좋겠다 싶은 때가 있습니다. 그때 사용하면 좋은 메서드인 trigger에 대해서 알아보도록 하겠습니다. 본문 . trigger 이벤트는 click와 같은 javaScript 이벤트 유형을 포함하는 문자열입니다. 트리거 이벤트는 트리거 이벤트 작동을 선언하기 전에 앞에서 이벤트 핸들러가 정의되어 있어야 합니다. 코드는 순차적으로 실행되니 트리거 이벤트 위에 꼭 클릭이벤트 처리를 하나 만들어 주셔야 합니다. 예를 들어 보겠습니다. 이미지를 보여주는 버튼 하나와 경고창을 생성하는 버튼 하나를 만들어주고, 경고창 버튼을 눌렀을 때, 이미지를 보여주는 버튼의 이벤트 효과도 함께 동작하게 해 보겠습니다. 간단하게 버튼 두 개와 이.. 2023. 4. 19. [html/jQuery] number와 정규식을 활용하여 input 박스에 숫자만 입력 가능하게 하는 법 서문 모바일로 텍스트 박스를 터치했을 때, 키보드가 한글, 영문으로 변경이 불가능하고 숫자 키보드만 나오는 경험 해보신 적 있을 것입니다. 마찬가지로 PC에서도 "숫자만 입력하세요"라는 박스에 영어나 한글 특수문자 등을 사용하려 해도 입력되지 않게 설정되어 있는 것들도 있습니다. 오늘은 이렇게 숫자만 입력받아서 처리해주어야 하는 상황에서 다른 문자는 입력하지 못하게 하는 방법을 알아보려 합니다. 본문 input type="number" 먼저 가장 간단한 방법입니다. input type을 number로 지정해 두면 숫자만 입력 가능하게 됩니다. 단점은 문자 하나 입력하고 다른 곳 클릭하고 와서 또 입력하고 하면 한 글자씩은 입력이 되는 것입니다. 숫자만 입력하랬는데 이렇게 문자를 굳이 입력하는 사람 없겠지.. 2023. 4. 12. 이전 1 2 3 다음 728x90 반응형
