본문 바로가기
JavaScript

input text box 특수문자 입력 제한 / 입력 시 이전값으로 되돌아가기

by sj0020 2021. 8. 19.
// html 

<input type="text" onkeyup="characterCheck(this)" onkeydown="characterCheck(this)" />

복붙할걸 감안해

키 대신에 onchange로 변경함..

 


// js

function characterCheck(obj){

 

  // 허용하고 싶은 특수문자가 있다면 여기서 삭제하면 됨

  var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi; 

 

  if( regExp.test(obj.value) ){

     alert("특수문자는 입력하실수 없습니다.");

     obj.value = obj.value.substring( 0 , obj.value.length - 1 ); // 입력한 특수문자 한자리 지움

  }

 

}

 

- 나 공백이 들어가게 되면

-나 공백을 넣기전 기존에 텍스트박스에 있던 값으로 되돌아간다

  <script type="text/javascript">
    // 수정전text 받아오기
    var beforeEdit = document.getElementById('pro_name').value;
    console.log(beforeEdit);
    function characterCheck(obj){
      // console.log(beforeEdit);
      // console.log(obj);
      // console.log(obj.value);

      // 못쓰게 하고싶은 특수 문자가 있다면 [] 내부에 넣기
      var regExp = /[ -]/gi;
      if( regExp.test(obj.value) ){
         alert("공백이나 '-'는 포함될 수 없습니다.");
         obj.value = beforeEdit; // textbox를 초기 값(초기이름)으로 되돌리기
         // obj.value = obj.value.substring( 0 , obj.value.length - 1 ); // 입력한 특수문자 한자리 지움
      }
    }
  </script>