집 > 기사 > 웹 프론트엔드 > JavaScript로 백스페이스 키를 차단하는 방법

JavaScript로 백스페이스 키를 차단하는 방법

小云云원래의: 2017-12-01 09:22:271696검색

우리 모두는 백스페이스 키가 이전 단계로 돌아가는 것을 의미한다는 것을 알고 있습니다. IE 브라우저를 개발하고 사용할 때 readonly="readonly" 속성을 사용하여 텍스트 상자를 읽기 전용9046980643e36aeb9f3e001d10d4bb6f일 때 이상한 문제가 있습니다. 커서가 읽기 전용 텍스트 상자에 들어간 다음 백스페이스 키를 누르면 이전 페이지로 이동합니다. 효과는 브라우저의 뒤로 버튼을 클릭하는 것과 같습니다. 페이지는 동일하지만 Firefox와 Google에서는 이러한 문제가 발생하지 않습니다. 이 문제를 해결하기 위해 텍스트 상자가 읽기 전용인 경우 다음 처리 방법을 작성했습니다. .

코드는 다음과 같습니다.

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
  function banBackSpace(e){  
    var ev = e || window.event;//获取event对象  
    var obj = ev.target || ev.srcElement;//获取事件源  
    var t = obj.type || obj.getAttribute(&#39;type&#39;);//获取事件源类型 
    //获取作为判断条件的事件类型
    var vReadOnly = obj.getAttribute(&#39;readonly&#39;);
    //处理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에서 백스페이스 키를 눌러 이전 페이지로 돌아갑니다"라는 문제를 해결할 수 있습니다.

ps: JS 사용 백스페이스(백스페이스 삭제) 키 또는 지정된 키에 대한 완벽한 코드를 보호합니다.

웹 페이지에 읽기 전용 속성이 있는 양식이 있는 경우 다음과 같이

<input type="text" readonly="readonly" name="HuoShangName" id="HuoShangName" />

위 텍스트 필드가 사용됩니다. 일부 정보를 사용자에게 표시하기 위해 사용자는 이를 변경할 수 없으므로 읽기 전용 속성 "readonly='readonly'"가 추가됩니다. 그러나 IE8에서는 다른 일반 텍스트 필드와의 차이점을 외관상으로는 알 수 없습니다. 예를 들어, 커서가 이 읽기 전용 속성의 텍스트 필드에 있을 때 사용자가 백스페이스(백스페이스 삭제 키)를 누르면 다음과 같은 오류가 발생합니다. 전체 브라우저를 다시 사용하면 사람들이 매우 우울해질 것입니다. 이때 우리가 해야 할 일은 이 읽기 전용 텍스트 필드에 지정된 일부 키를 차단하여 사용자가 이 키를 누를 때 해당 키가 작동하지 않도록 하는 것입니다. 브라우저가 뒤로, 새로고침 또는 앞으로 이동하도록 합니다.

02d99bb3cc95cbc7275eb8408a1bd1d3

위 코드에서 onkeydown은 키를 눌렀을 때를 의미합니다. 다음은 JS 함수 pingbi의 특정 코드입니다. 이 코드도 매우 간단합니다. 유일한 속성은 사용자가 백스페이스(백스페이스 삭제 키)를 눌러도 브라우저가 뒤로 돌아가지 않습니다.

위 내용은 백스페이스 키를 차단하는 JavaScript 구현 코드입니다. 더 많은 프로그래밍 관련 질문이 있으시면

PHP 중국어 웹사이트

를 참고해 주세요.

JavaScript로 백스페이스 키를 차단하는 방법

관련 기사