어제 풀던 문제를 보완하다가
form 태그안에 있는 input태그의 value
즉 input 태그의 type을 number로 지정하고 maxlength를 적용했는데
웹에서는 적용이 되지않던것이다
그래서 input태그에서 type을 number로 주었을때 maxlength를 적용시킬리면 하나의 코드가 필요하다
1. script 코드
<script>
function numberLength(event){
if(event.value.length > event.maxLength){
event.value = event.value.slice(0, event.maxLength);
}
}
</script>위와 같이 코드를 작성하면 된다
HTML내에서 script태그를 생성해서 작성해도 좋고
js파일 내에서 작성하여도 좋다
위와 같은코드를 작성하고 input태그 안에 또다른 속성
oninput을 작성한다
이와 같이 oninput을 작성하고 뒤에는 함수이름을 그대로 적어주면된다.
2. slice()
나도 구글링을해서 얻은 결과이지만
script코드를 읽을수 있다보니 작성하고 한번 해석해보는 중에
slice() 이부분이 기억이 잘 나지 않아 다시 복습하고자 설명해두려고한다.
보통 slice(x,y) 함수는 배열에서 많이 사용하는데 x부터 y까지 값을 복사하여 리턴해주는 형식이다.
slice는 slice(x,y) 2개의 파라미터를 가진다
첫번째 x는 시작점 이고 y는 끝나는 지점이다
예를 들어서
const arr=[1,2,3,4] 1. arr.slice(1,3)
배열의 시작은 1이 아닌 0부터 시작하기때문에
배열 [1,2,3,4]에서 [2,3]만 복사하여 새로운 배열을만들고 리턴해준다.
(끝나는 지점 3은 포함하지않고 리턴한다)
[1,2,3,4] => [2,3]2. arr.slice(1)
두번째 파라미터의 값 (끝나는 지점)이 입력되지않으면
첫번째 파라미터의 값 (시작 점)부터 끝까지 복사하여 리턴해준다
[1,2,3,4] => [2,3,4]
3.arr.slice(-4,-2)
slice에서 -(마이너스)가 뜻하는것은 뒤에서부터 시작 즉, 리버스라는 소리이다.
[1,2,3,4] => [2,3]slice는 끝나는지점의 값은 무조건 포함하지않는다고 생각하면 된다
추가로 -(마이너스)는 뒤에서부터 양수는 앞에서부터
저도아직 초보자이기 때문에 설명이 틀렸을 수도있습니다 만약에 이글을 읽어보시다가 틀린부분 알려주시면 감사하겠습니다
