Input number 글자수 제한 - input number geuljasu jehan

퍼블리싱/html css js

[Javascript] input 글자수 체크하기

임고미 2020. 9. 16. 16:15

1. type text/ tel

<input type="text" class="userName" maxlength="20" placeholder="성함을 입력해주세요.">
<input type="tel" class="userPhone" maxlength="11" placeholder="전화번호를 입력해주세요.">

간단하게 설정가능

2. type number

//html
<input type="tel" class="userPhone" maxlength="11" placeholder="전화번호를 입력해주세요." oninput="maxLengthCheck(this)">

//js
//숫자 maxLength check
function maxLengthCheck(object){
  if (object.value.length > object.maxLength){
    object.value = object.value.slice(0, object.maxLength);
  }    
}

tel 이나 number으로 type을 설정할경우,

mobile에서 input focus되면 숫자키보드만 뜬다. ( text같은경우엔, 자판까지 뜬다. )

JavaScript

[#. JavaScript] input maxlength 글자수 제한하기

shab 2021. 10. 27. 09:24

input에 입력하는 텍스트 길이를 제한하려고 한다

2가지 방법에 대해 알아보자

① maxlength 사용하기

⑴ HTML

<input type="text" placeholder="텍스트" maxlength="6" />

간단하다

하지만 아래와 같이 숫자가 먼저 올 때는 maxlength 제한이 어렵다

② function 생성하기

입력한 텍스트가 maxlength를 넘었을 때 뒤에 오는 텍스트는 잘라서 다시 value값으로 넣는 function을 사용한다

⑴ HTML

<input type="text" placeholder="텍스트" maxlength="6" oninput="handleInputLength(this, 6)" />

⑵ JS

function handleInputLength(el, max) {
  if(el.value.length > max) {
    el.value = el.value.substr(0, max);
  }
}

웹 프로그래밍

[JS] input[type=input] 일 때, 글자 수 제한

Minius 2020. 5. 7. 19:06

숫자 코드를 4자리만 입력해야 하는 일이 있다.

혹은 휴대폰 인증번호 5,6 자리만 입력해야 한다.

이 때, maxlength를 사용할 수 있다.

그런데 이게 [type=text] 일 때는 잘 되는데

                [type=number] 일 때는 되지 않는다.

그래서 js로 해결을 해 주어야 한다.

1. 함수를 만들고
2. oninput으로 입력될 때 마다 실행시킨다.

    function lengthLimit4(e){
        if(e.value.length > 4){
            e.value = e.value.slice(0, 4)
        }
    }

<input type="number" placeholder="코드 4자리" oninput="lengthLimit4(this)">

해당 방법이 입력되는걸 가장 깔끔하게 막는다.

Programing/JavaScript

[javascript] input 입력 글자 수 제한

콩다영 2020. 9. 10. 14:31

input 입력 글자 수 제한하기

input 박스로부터 값을 입력받아 db에 저장을 하게 되는데 그 data가 size가 제한되어 있다면 설정을 해줘야된다.

input type 입력 글자 수 제한하는 방법을 정리해본다.

먼저, input type이 text 일 떄를 보자 !

input type이 text일때는 maxlength의 값만 설정해주면 된다.

예시로. ID의 입력 값을 10으로 제한을 주고 싶을 때는 이렇게 해주면 된다. (간편하군~ :b)

<tr>
	<th>USER ID</th>
	<td><input type="text" maxlength="10" id="testId"></td>
</tr>

하지만 여기서 추가로 주의해야 할 점은 input type이 number일 때는 maxlength가 정상 작동하지 않는다. ㅠㅠ

input type이 number일 때는 따로 함수를 생성해서 추가해줘야된다.

생성해준 함수를 number type인 input에 oninput으로 호출해주면 설정 완료 -!!

<input type="number" maxlength="10" oninput="numberMaxLength(this);"/>

<script>
    function numberMaxLength(e){
        if(e.value.length > e.maxLength){
            e.value = e.value.slice(0, e.maxLength);
        }
    }
</script>

프로그래밍/WEB

HTML Input number maxlength 정하는 방법

도원도원 2018. 5. 4. 09:30

안녕하세요!

오늘은 업데이트가 많아 퇴근이 늦은 Milkye입니다 :)

오늘 소스를 수정하다가 갑자기 요청이 들어오는 바람에 수정을 하게 된 소스입니다.

HTML에서 [ Input ]은 여러가지 type으로 사용을 할 수 있는데, 오늘은 그 중에서 number속성을 가지고 최대길이(maxlength)를 설정을 해보도록 하겠습니다.

 기본적으로 input의 type이 text일땐, maxlength를 지정해주면 최대 글자 수를 지정을 할 수 있지만 number는 그렇지가 않습니다. 그래서 다른 방법을 통해 최대 글자 수를 정해줘야 하죠.

바로 요렇게 말입니다.

우리가 볼 부분은 function 부분이 되겠네요!

아래 이미지를 보시면 Local Date와 Time 그리고 Number에서는 maxlength가 적용이 안되는 것을 보실 수 있습니다.

그렇기에  function을 이용해서 강제로 자릿수를 맞춰줄거에요!

현재 value의 길이와 input에서 정의한 maxlength의 길이와 비교를 하여서 더 크다면, maxlength의 길이만큼 언제?! oninput 상태일 때 잘라버리겠다! 라는 뜻을 가진 함수입니다.

이렇게 하시면 쉽게 숫자도 자릿수 제한을 두고 사용을 하실 수 있을거에요!

이 방법은 핸드폰 번호를 4자리로 잘라낼 때, 유용하게 사용을 하실 수 있습니다!

그럼 안뇽!!