텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 text  input 필드의 타입을 number나 tel로 변경하는 것을 고려해볼 수 있습니다. input 타입을 nubmer로 변경하면 숫자만 입력 가능하고 tel로 설정하면 숫자와 하이픈(-)과 더하기 기호, 괄호 등 전화번호 입력에 필요한 숫자와 문자만 입력할 수 있습니다.

text 타입을 그대로 두고 숫자만 입력 가능하도록 하거나 숫자와 하이픈(-)만 입력하도록 허용하려는 경우 아래의 자바스크립트나 jQuery 스크립트를 활용할 수 있습니다.

텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

다음 자바스크립트를 적용하면 숫자와 대시(-)만 입력이 가능하게 됩니다.

var userName = document.querySelector('#telephone');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d\-]/,'ig'), "");
  this.value = newValue;
}

위의 코드는 Input with type="number" that allows only numbers to be typed 문서에 제시된 스크립트를 응용한 것입니다.

jQuery를 사용하고 싶은 경우 다음 스크립트로 테스트해볼 수 있습니다.

$(document).ready(function () {    
    
            $('.numberonly').keypress(function (e) {    
    
                var charCode = (e.which) ? e.which : event.keyCode    
    
                if (String.fromCharCode(charCode).match(/[^0-9\-]/g))    
    
                    return false;                        
    
            });    
    
        });

위의 코드는 How to Only Allow Numbers in a Text Box using jQuery(제이쿼리를 사용하여 텍스트 박스에 숫자만 허용하는 방법)에 제시된 스크립트를 약간 응용한 것입니다.

워드프레스 컨택트 폼 플러그인에서 텍스트 필드에 숫자만 허용하기

워드프레스 Contact Form 7 플러그인에서는 input 필드의 타입을 number나 tel로 지정할 수 있는 옵션이 제공됩니다. Quform 플러그인에서는 number 타입이 지원되지 않습니다. Quform을 사용하는 경우 위의 스크립트를 활용하여 텍스트 상자에 숫자 또는 숫자와 하이픈만 입력이 가능하도록 제한할 수 있을 것입니다. 또는, 다음 글을 참고하여 input 타입을 number로 변경할 수 있습니다.

워드프레스 Quform 플러그인 숫자 입력 필드 - 워드프레스 정보꾸러미

자바스크립트를 사용하여 input 타입을 변경하는 것도 가능합니다.

document.getElementById('input1').setAttribute('type', 'text');
// 출처: https://stackoverflow.com/questions/58884052/change-input-type-html-using-javascript

참고

https://avada.tistory.com/2801

워드프레스 케이보드 회신 메일 설정 작업

https://avada.tistory.com/2636

워드프레스 Quform 플러그인: 비용 계산 양식 만들기

https://avada.tistory.com/2824

CSS를 사용하여 하단 배너 만들기