백스페이스 키를 차단하기 위해 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에서 백스페이스 키를 눌러 이전 페이지로 돌아갑니다"

ps 문제를 해결할 수 있습니다. JS to Shield 백스페이스(백스페이스 삭제) 키 또는 지정된 키에 대한 완벽한 코드

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

<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를 사용한 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!