[Javascript/jQuery] 사용자 입력 비활성화하기 (text / button)

 

무작위의 숫자를 띄우고 일정 시간이 지나면 숫자를 가린 뒤 사용자의 입력을 받아 정답인지 확인하는 과제를 진행했다.

과제에서 제시하는 기본적인 기능을 구현하고나니 전혀 어렵지가 않아서 게임같이 느껴지는 기능을 더 추가하고싶었다!

우선은 숫자가 보여지는 동안은 정답을 입력할 수 없도록 제한하는 기능을 추가해보기로 했다.

 

 

disabled

input 의 attribute 중 입력을 제한하는 것이 분명 있을 것 같아 어떤 것들이 있는지 살펴보았다.

가장 먼저 눈에 띈 것이 disabled였고, 바로 적용해보았다.

기본적으로 숫자 입력과 제출 버튼을 비활성화 시켜두었다가 숫자를 암기할 수 있는 제한시간이 지나면 숫자 숨김 / 입력 활성화 / 제출버튼 활성화 되도록 했다.

 

<input type="text" id="userinput" placeholder="시작버튼을 눌러주세요!" disabled>

 

위와 같이 disabled를 태그에 추가하면 해당 요소의 조작이 비활성화된다.

추가하지 않을 경우 기본적으로 활성화 상태이기 때문에, disabled를 추가/제거 해주거나 disabled의 값을 true/false로 변경해주면 된다.

 

// input 조작 활성화
$('#userinput').attr("disabled", false);
$('#userinput').removeAttr("disabled");

// input 조작 비활성화
$('#userinput').attr("disabled", true);

 

특정 요소의 속성을 수정/제거하는 메서드(jQuery)를 활용했다.

 

 

readonly

사용자가 입력필드의 값을 수정할 수 없도록 제한하는 속성으로, text 필드에만 사용할 수 있다.

위와 마찬가지로 readonly가 없는 경우 기본적으로 값을 입력할 수 있는 상태이기 때문에, readonly를 추가/제거하거나 값을 true/false로 변경하여 사용하면 된다!

 

// 입력값 수정 활성화
$('#userinput').attr("readonly", false);
$('#userinput').removeAttr("readonly");

// 입력값 수정 비활성화
<input type="text" id="userinput" placeholder="시작버튼을 눌러주세요!" readonly>  // 태그 선언시!
$('#userinput').attr("readonly", true);