[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2

 

 

[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-1

 

이전에 만들었던 게임의 문제점 중에 입력 칸에 두 글자 이상 입력이 가능한 점이 있었습니다

한 칸에 하나의 철자가 들어가야 하는데 2개 이상이 입력되는 현상을 없애도록 하겠습니다

 

해결방법은 간단합니다

입력 칸은 html의 input을 사용해서 입력한 철자를 보여줍니다

여기서 처음 입력할 때 한 글자씩만 입력되도록 변경하면 됩니다

따로 기능을 구현할 필요 없이 input에서 제공하는 속성을 사용하면 간단하게 해결할 수 있습니다

input의 속성 중 maxlength 속성이 있습니다

최대 글자 길이를 제한하는 속성으로 "maxlength=1" 입력하면 최대 글자 길이를 한 글자로 제한합니다

 

사용방법

예) <input type="text" maxlength="2">
input에 입력 가능한 글자는 2글자로 제한

HTML

이전 코드

    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <button>제출</button>

속성 추가한 코드

    <input type="text" class="input" maxlength="1">
    <input type="text" class="input" maxlength="1">
    <input type="text" class="input" maxlength="1">
    <input type="text" class="input" maxlength="1">
    <input type="text" class="input" maxlength="1">
    <button>제출</button>

 

<script>

<script> 태그 부분도 속성 추가한 코드에 맞춰서 코드를 변경합니다

이전 코드

var template = `<div>
                    <input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                </div>`;

속성 추가한 코드

var template = `<div>
                    <input type="text" class="input" maxlength="1">
                    <input type="text" class="input" maxlength="1">
                    <input type="text" class="input" maxlength="1">
                    <input type="text" class="input" maxlength="1">
                    <input type="text" class="input" maxlength="1">
                </div>`;

변경한 코드를 저장하고 input창에 글자를 입력하면 예전과 달리

한 글자씩만 들어가는 것을 확인할 수 있습니다

 

이렇게 문제점 하나가 해결되었습니다