[jQuery] 마우스 드래그로 크기 조절 가능한 텍스트 박스 만들기 + 텍스트 박스 크기에 따라 글자 수 제한

 

 

 

html의 태그 중 input태그의 텍스트 박스는 textarea와 다르게 마우스 드래그로 사용자가 크기 변경을 할 수 없습니다.

이런 텍스트 박스를 사용자 마음대로 크기를 조절할 수 있게 변경하려면 어떻게 해야 될까요?

 

이번 포스팅은 마우스 드래그로 텍스트 박스의 크기를 조절하는 방법에 대해서 알아보겠습니다.

 

 

반응형

 

 

---

 

텍스트 박스 만들기

 

<input type="text" id="resizableInput" value="크기를 조절하세요">

 

 

간단하게 id가 resizableInput인 텍스트 박스를 하나 만들어줍니다.

 

input {
    resize:horizontal; /* 가로 크기만 조절 가능하도록 설정 */
    overflow: hidden; /* 크기가 변경될 때 내용을 잘라내지 않도록 설정 */
}

 

 

css에서는 resize를 통해 가로 크기만 조절 가능하도록 하며,

overflow를 사용하여 크기가 변경될 때 내용이 잘리지 않도록 해줍니다.

 

 

 

자바스크립트 작성

 

 

드래그 이벤트를 처리할 자바스크립트를 작성해 주겠습니다.

 

const resizableInput = document.getElementById('resizableInput');

resizableInput.addEventListener('mousedown', function (event) {
    // 마우스 버튼이 왼쪽 버튼(좌클릭)인 경우에만 실행
    if (event.button === 0) {
        let startX = event.clientX;
        let startWidth = parseInt(document.defaultView.getComputedStyle(resizableInput).width, 10);

        function doDrag(event) {
            resizableInput.style.width = startWidth + event.clientX - startX + 'px';
            $("#resizableInput").attr("maxlength", (startWidth + event.clientX - startX)/15);
        }

        function stopDrag() {
            document.removeEventListener('mousemove', doDrag, false);
            document.removeEventListener('mouseup', stopDrag, false);
        }

        document.addEventListener('mousemove', doDrag, false);
        document.addEventListener('mouseup', stopDrag, false);
    }
});

 

 

 

마우스 좌클릭으로 크기를 조절하고 해당 크기에 따라 maxlength 값이 변경되도록 스크립트를 작성해 줍니다.

좀 더 정확하게 작성하려면 maxlength의 값을 부여해 주는 조건을 세세하게 짜주어야 될 것 같은데,

이번에는 간단하게 텍스트박스의 크기가 변할 때 입력가능한 텍스트의 수도 변경이 가능하다는 것을 보여주기 위한,

간단한 예제로 작성했습니다.

 

 

728x90

 

 

완성

 

 

동작영상

 

이렇게 작성하면 위와 같이 텍스트 박스를 드래그를 통해 크기 조절을 하고,

크기에 따라 텍스트 박스의 글자 수도 제한 되는 것을 확인할 수 있습니다.

 

---

 

결론

 

자바스크립트를 통해 마우스 클릭과, 드래그에도 이벤트를 적용할 수 있다는 것을,

이번 포스팅을 통해 알 수 있었습니다.

 

이런 클릭 이벤트 외에도, 키보드 입력, 마우스를 위에 올려 두었을 때 등,

여러 경우에 코딩을 통해 다양한 이벤트를 부여할 수 있습니다.

 

해당 이벤트들을 구성하여 다채로운 페이지를 작성해 보시길 바랍니다.