Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 내배캠 프로젝트
- 내일배움캠프 최종 프로젝트
- 파이썬 slice
- 프로그래머스
- 한글 공부 사이트
- 파이썬 list
- 내일배움캠프 프로젝트
- JavaScript
- js
- 리액트 프로젝트
- 리액트 페이지 이동
- Next 팀 프로젝트
- 파이썬 반복문
- 리액트 팀 프로젝트
- 코딩테스트
- 그리드 정렬
- 리액트 훅
- 타입스크립트
- REACT
- 파이썬 for in
- 내일배움캠프
- 자바스크립트
- 타입스크립트 props
- 파이썬 for
- 리액트
- useState
- typeScript
- React Hooks
- 파이썬 enumerate
- 타입스크립트 리액트
Archives
- Today
- Total
aotoyae
[JS] input maxlength : 한글, 숫자 입력 시 오류 해결 & e.target 구조분해 본문
💡 input 에 한글이나 숫자를 입력할 때 maxlength 가 부자연스러운 동작을 하는데,
원하는 글자수로 딱 제한할 수 있도록 해결해보자!
<input
type="text"
value={nickName}
onChange={(e) => setNickName(e.target.value)}
placeholder="최대 20자"
maxLength={20}
/>
maxLength 로 제한을 두니 한글을 입력했을 때나,
숫자 + 한글을 입력했을 때 21 자가 입력이 되버린다.
⬇️
const handleOnInput = (e, maxlength) => {
const { target: { value }, } = e;
if (value.length > maxlength) e.target.value = value.substr(0, maxlength);
};
// ...
<input
type="text"
value={nickName}
onInput={(e) => handleOnInput(e, 20)}
onChange={(e) => setNickName(e.target.value)}
placeholder="최대 20자"
/>
이렇게 input 값의 길이가 설정한 maxlength 보다 길면
0 ~ maxlength 까지 잘라주는 함수로 오류를 해결할 수 있다!
숫자와 한글을 조합했을 때 원했던 20자까지 잘 입력된다.
🔗 https://hianna.tistory.com/435
[Javascript] input 에서 입력 글자수 제한하는 2가지 방법
Javascript의 input 폼에 입력되는 최대 글자수를 제한하는 방법 2가지를 알아보도록 하겠습니다. 1. maxlength 속성 사용하기 2. 입력된 글자수를 체크로직 구현하기 1. maxlength 속성 사용하기 maxlength 속
hianna.tistory.com
[REACT]구조분해 할당 예시
객체의 구조분해
velog.io
🔗 https://whales.tistory.com/97
ES6 : 구조할당(feat.이벤트 값 핸들링)
ES6 내용 중 이전에 정리를 했었지만 스스로 제대로 이해를 하지 못하고 있는 거 같아서 다시 한번 내용을 정리해 보려 합니다. 구조 분해 할당이란 배열이나 객체의 값을 원하는 개별 변수에 할
whales.tistory.com
'JavaScript' 카테고리의 다른 글
[JS] 함수 선언문 & 화살표 함수 : 호이스팅, 호출 위치 (0) | 2024.02.16 |
---|---|
[JS] 문자열 첫 글자만 대문자로 변경 (0) | 2024.02.09 |
[Web] SPA : 싱글 페이지 App (0) | 2024.01.26 |
[JS] 데이터의 불변성 : 원시 데이터, 참조형 데이터 (0) | 2024.01.23 |
[JS] sort 배열 오름차순, 내림차순 정렬 & localeCompare 문자열 정렬 (0) | 2024.01.17 |