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을 입력하면 자동으로 제거되면서 사용자에게 시각적 경고가 제공됩니다.
추천 : 