본문 바로가기

input5

[웹 브라우저 & 모바일] 모바일 기기에서 브라우저의 인풋이 focus 되었을 때, 가상키보드 안 생기게 하는 방법

두가지 방법이 있겠다. 2023. 2. 23.

[Vue] input type=number 엘리먼트에서 스크롤로 값 변경 막기

개요 스크롤로 값이 변경되는 현상을 발견하였다. 해결방법 귀한거디.... scroll 휠 2022. 11. 21.

[CSS] input width 100% 삐져나오는 현상

문제 input width 100%로 스타일을 주었는데, 아래 그림처름 삐져나오는 문제가 발생했습니다. 해결방법 border-box : width와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. // styled-components 기반으로 작성되었다. const Input = styled.input` width: 100%; box-sizing: border-box; ` 발생 원인 input의 외곽선 너비가 입력칸 너비에 포함되기 때문임. 2022. 1. 4.

[CSS] HTML input 요소 커스텀하기

개요 안녕하세요! 이번에는 input을 커스텀하기 위한 style 코드를 알아보겠습니다. 왜 input 요소에 스타일링이 필요했냐면, 저는 클릭하면 텍스트가 클립보드에 복사되는 기능을 하는 버튼을 만들어야 했습니다. window 스펙에서 제공하는 docuement.commandexec() 메서드를 사용하고 'copy' 매개변수를 주면 텍스트를 복사를 할 수 있겠더라구요. 그런데, commandexec()메서드의 타겟이 되는 DOM을 지정을 해줘야 하는데, 그 방법이 input과 textarea 요소에서만 select()해줘야 했습니다. 그니까 input요소를 쓸 수밖에 없었습니다. 사용자 입장에서는 input 박스 느낌을 주지 않고 누르면 복사가 되는 느낌을 줘야 했기 때문에 브라우저에서 기본적으로 제공.. 2021. 6. 26.

[HTML] 숫자만 입력받기 및 숫자 최대값 최소값 입력 제한하기

마크업 작업을 할 때, 사용자에게 입력을 받는 페이지에서는 요소를 사용합니다. 요소는 마크업 요소 중에서 강한 기능을 가지고 있습니다. 그 이유는 정말 많은 유형(type) 기능을 제공하기 때문입니다. type의 기본값은 type="text"입니다. 숫자만 입력을 받게 하는 유형(type)도 있습니다. input요소에는 type이라는 속성이 존재합니다. type 속성 중에 number를 사용하면 됩니다. 1. input type="number"로 준다. 2. 입력값 최소값 및 최대값 설정하기 MDN을 참고하시면 많은 도움이 됩니다. MDN HTML 입력 요소 2021. 2. 9.

티스토리툴바