집 > 기사 > 웹 프론트엔드 > 백스페이스 키를 보호하기 위한 JavaScript 구현 코드

백스페이스 키를 보호하기 위한 JavaScript 구현 코드

韦小宝원래의: 2018-01-17 10:41:102018검색

이 글은 백스페이스 키를 보호하는 JavaScript구현 코드를 주로 소개하고 있습니다. JavaScript에 관심이 있는 친구들은 이 글을 참고해 보세요

오늘 IE 브라우저에서 참고할 수 있습니다. readonly="readonly"属性将文本框设置成只读6d755d0dbe38fd331f45cd94920440b8를 사용할 때 이상한 문제가 있음을 발견했습니다. 커서가 읽기 전용 텍스트 상자에 들어간 다음 백스페이스 키를 누르면 이전 페이지로 이동합니다. 이는 브라우저의 뒤로 버튼을 클릭하여 이전 페이지로 돌아가는 것과 같습니다. 이전 페이지와 동일하지만 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에서는 다른 일반 텍스트 필드와의 차이점을 외관상으로는 알 수 없습니다. 예를 들어, 커서가 이 읽기 전용 속성의 텍스트 필드에 있을 때 사용자가 백스페이스(백스페이스 삭제 키)를 누르면 다음과 같은 오류가 발생합니다. 전체 브라우저를 다시 사용하면 사람들이 매우 우울해질 것입니다. 이때 우리가 해야 할 일은 이 읽기 전용 텍스트 필드에 지정된 일부 키를 차단하여 사용자가 이 키를 누를 때 해당 키가 작동하지 않도록 하는 것입니다. 브라우저가 뒤로, 새로고침 또는 앞으로 이동하도록 합니다.

<input class="input w350" type="text" readonly="readonly" onkeydown="PingBi(&#39;8&#39;)" name="HuoShangName" id="HuoShangName" />

위 코드에서 onkeydown은 키를 눌렀을 때를 의미합니다. 다음은 JS 함수 pingbi의 특정 코드입니다. 이 코드도 매우 간단합니다.

function PingBi(id){
 var k=window.event.keyCode;
 if(k==id){window.event.keyCode=0;window.event.returnValue=false;return false;}
}

좋아, 커서가 텍스트 필드에 있을 때 읽기 전용 속성 사용자가 백스페이스(백스페이스 삭제 키)를 눌러도 브라우저가 뒤로 돌아가지 않습니다.

위는 에디터가 소개한 백스페이스 키 차단용 자바스크립트 구현 코드입니다. 많은 분들께 도움이 되었으면 좋겠습니다! !

백스페이스 키를 보호하기 위한 JavaScript 구현 코드

관련 기사