JavaScript에서 백스페이스 키를 비활성화하는 방법

오늘 IE 브라우저에서 readonly="readonly" 속성을 사용하여 텍스트 상자를 읽기 전용으로 설정할 때 이상한 문제가 발생한다는 사실을 발견했습니다. 커서가 읽기 전용 텍스트 상자에 들어가고 그런 다음 백스페이스 키를 누르면 이전 페이지로 이동합니다. 이는 브라우저의 뒤로 버튼을 클릭하여 이전 페이지로 돌아가는 것과 같습니다. 그러나 Firefox 및 Google에서는 이 문제를 해결하기 위해 이러한 문제가 없습니다. 처리 방법은 다음과 같습니다. 텍스트 상자가 읽기 전용이면 백스페이스 키를 비활성화하세요.
코드는 다음과 같습니다.

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
 function banBackSpace(e){ 
  var ev = e || window.event;//获取event对象 
  var obj = ev.target || ev.srcElement;//获取事件源 
  var t = obj.type || obj.getAttribute('type');//获取事件源类型 
  //获取作为判断条件的事件类型
  var vReadOnly = obj.getAttribute('readonly');
  //处理null值情况
  vReadOnly = (vReadOnly == "") ? false : vReadOnly;
  //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
  //并且readonly属性为true或enabled属性为false的，则退格键失效
  var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
     && vReadOnly=="readonly")?true:false;
  //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
  var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
     ?true:false;  
  
  //判断
  if(flag2){
   return false;
  }
  if(flag1){ 
   return false; 
  } 
 }

window.onload=function(){
 //禁止后退键 作用于Firefox、Opera
 document.onkeypress=banBackSpace;
 //禁止后退键 作用于IE、Chrome
 document.onkeydown=banBackSpace;
}

이러한 처리를 추가하면 읽기에서 백스페이스 키를 누르는 문제를 쉽게 해결할 수 있습니다. - IE에서 입력란만 "이전 페이지로 돌아가기" 문제.

이 글이 마음에 드셨으면 좋겠고, 편집자가 업데이트하는 글도 계속해서 관심 가져주시길 바랍니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼