입력 필드에서 특정단어(예:#err)가 포함되었을 때 실시간 감지 및 경고창 띄우기

1, JavaScript의 input 이벤트 리스너를 사용하여 사용자가 입력할 때 #err 단어가 포함되었는지 실시간 체크하여 경고창을 띄우도록 구현할 수 있습니다.

<input type="text" name="link1" id="link1" value="<?=$link1?>" style="width:98%;" class="input" />
<script>
document.getElementById("link1").addEventListener("input", function() {
    const inputValue = this.value;
    
    if (inputValue.includes("#err")) {
        alert("경고: 입력값에 '#err'이 포함되었습니다.");
        this.value = inputValue.replace("#err", ""); // 자동 제거
    }
});
</script>

 

설명
document.getElementById("link1") → input 필드를 가져옴
.addEventListener("input", function() { ... })
사용자가 입력할 때마다 input 값 실시간 감지
if (inputValue.includes("#err")) { alert(...) }
#err이 포함되면 경고창(alert) 띄움
입력값에서 #err을 자동으로 제거 (this.value = inputValue.replace("#err", "");)

2, 경고창(alert) 대신 입력 필드를 빨간색 테두리로 강조하고, 경고 메시지를 표시할 수도 있습니다.

<input type="text" name="link1" id="link1" value="<?=$link1?>" style="width:98%;" class="input" />
<script>
document.getElementById("link1").addEventListener("input", function() {
    // "#err"이 포함되었을 경우 입력 필드 강조
    if (this.value.includes("#err")) {
        this.style.border = "2px solid red"; // 빨간색 테두리 적용
    }

    // "#err" 자동 제거
    const newValue = this.value.replace(/#err/g, ""); 
    if (this.value !== newValue) {
        this.value = newValue;
        
        // "#err"이 제거된 후에도 잠시 빨간 테두리를 유지
        setTimeout(() => {
            this.style.border = ""; // 원래 테두리로 복구
        }, 500); // 0.5초 후 원래 상태로
    }
});
</script>

설명
this.value.includes("#err")
입력값에 #err이 포함되었는지 실시간으로 확인합니다.
this.style.border = "2px solid red";
입력 필드를 빨간색 테두리로 강조합니다.
this.value = this.value.replace(/#err/g, "");
입력값에서 #err을 자동으로 제거합니다.
else 블록
정상 입력일 경우 테두리를 원래대로 복구합니다.
이제 입력 필드에 #err을 입력하면 자동으로 제거되면서 사용자에게 시각적 경고가 제공됩니다.