[2024.08.07 TIL] 팀 프로젝트 수정 기능

input 길이 제한 및 입력 제한

• maxlength - 길이 제한 속성

  <input type="text" id="name" maxlength="3">

• oninput - input내의 값들이 변경될 때마다 이벤트 발생

  <input type="text" class="form-control" id="mbti" maxlength="4" oninput="mbtiCheck(this)">
  <script>
   function mbtiCheck(e) {
     e.value = e.value.replace(/[^A-Za-z]/ig, '');
   }
  </script>

오늘 팀 프로젝트를 하면서 해본 것

오늘은 팀 프로젝트에서 수정 및 삭제 기능을 보완했다.

수정 버튼을 눌러 수정 시 비밀번호를 요구하게 하는 부분을 만들었다.

$(document).on('click', '#modalUpdate', async function () {

            let tempId = $(".img-box").attr("id");

            let password = await getDoc(doc(db, "members", tempId));
            let passwordCheck = password.data();
            let inputCheck = prompt("비밀번호를 입력해주세요.", "");

            if (passwordCheck['password'] == inputCheck) {
                $(".input").attr('readonly', false);
                alert("이제부터 수정 가능합니다.");
                $("#update").show();
            } else {
                alert("올바른 비밀번호를 입력해주세요.");
            }
        });

비밀번호를 입력하는 곳을 어디로 할까 고민했는데 그냥 심플하게 프롬프트로 해봤다.

비밀번호 체크를 통과하면
수정 확인 버튼이 생기고 상세 페이지의 각 항목에서 readonly 속성을 지워서 폼을 그대로 사용할 수 있게 했다.

input 태그에 속성을 추가해서 각 항목에 조건도 추가해줬다.

<div class="container">
    <form action="#" class="form" id="form1">
        <div class="input-group mb-3">
            <span class="input-group-text">이름</span>
            <input type="text" placeholder="${name}" class="form-control input" value="${name}" id="name" maxlength="6" readonly >
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">MBTI</span>
            <input type="text" placeholder="${mbti}" class="form-control input" value="${mbti}" id="mbti" maxlength="4" oninput="mbtiCheck(this)" readonly >
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Email</span>
            <input type="text" placeholder="${email}" class="form-control input" value="${email}" id="email" maxlength="30" readonly >
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Github</span>
            <input type="text" placeholder="${github}" class="form-control input" value="${github}" id="github" readonly >
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Blog</span>
            <input type="text" placeholder="${blog}" class="form-control input" value="${blog}" id="blog" readonly >
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">짧은 소개</span>
            <input type="text" placeholder="${content}" class="form-control input" value="${content}" id="content" readonly >
        </div>
    </form>
</div>

maxlength로 길이를 제한하고 oninput으로 값이 변할 경우의 이벤트를 걸었다.

function mbtiCheck(e) {
    e.value = e.value.replace(/[^A-Za-z]/ig, '');
}

function passwordCheck(object){
    if(object.value.length > object.maxLength){
        object.value = object.value.slice(0, object.maxLength);
    }
}

그리고 oninput에 들어갈 함수를 미리 정의해놓는다.