Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melumpuhkan kekunci Backspace dalam JavaScript

Bagaimana untuk melumpuhkan kekunci Backspace dalam JavaScript

PHPz
PHPzasal
2016-05-16 15:27:571405semak imbas

Hari ini saya dapati dalam pelayar IE bahawa apabila menetapkan kotak teks kepada baca-sahaja menggunakan atribut readonly="readonly" terdapat masalah pelik: jika kursor memasuki kotak teks baca sahaja dan kemudian tekan Menekan kekunci Backspace akan melompat ke halaman sebelumnya Kesannya sama seperti mengklik butang belakang penyemak imbas untuk kembali ke halaman sebelumnya menulis kaedah pemprosesan berikut, jika kotak teks adalah baca sahaja, maka lumpuhkan kekunci Backspace.
Kodnya adalah seperti berikut:

//处理键盘事件 禁止后退键(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;
}

Selepas menambah pemprosesan ini, anda boleh menyelesaikan masalah "menekan kekunci Backspace dalam bacaan dengan mudah. -hanya kotak input di bawah IE "Kembali ke halaman sebelumnya" masalah.

Saya harap anda menyukai artikel ini dan terus memberi perhatian kepada artikel yang dikemas kini oleh editor.

【Tutorial berkaitan yang disyorkan】

1 Tutorial video JavaScript
2 Manual dalam talian JavaScript
3 tutorial bootstrap

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn