Javascript: Làm thế nào tôi có thể chặn ký tự backspace?

Question

Tôi không muốn người dùng trang web của mình sử dụng backspace để truy cập trang trước,
nhưng tôi vẫn muốn giữ việc sử dụng backspace,
giống như xóa nhập sai.
Tôi có thể làm gì?

Cảm ơn rất nhiều.

Answer 1

Bạn sẽ có thể đính kèm trình nghe onKeydown/Up/Press vào cửa sổ của mình. Trong chức năng này, hãy xem mã khóa đã được nhấn và tại mục tiêu sự kiện. Nếu mã khóa là backspace và đích không phải là hộp nhập hoặc văn bản, hãy ngăn sự kiện.

Answer 2

Bạn có thể sử dụng thuộc tính "onbeforeunload" trên thẻ body để nhắc người dùng rằng anh ấy rời khỏi trang.

Answer 3

Như những người khác đã đề cập, có các phương pháp mà bạn có thể theo dõi các sự kiện quan trọng của phím xóa lùi và thực hiện các hành động khác nhau.

Tôi khuyên bạn nên chống lại bắt phím backspace cho một vài lý do:

1) Nó chỉ đơn giản khó chịu và bị kích thích người dùng có thể sẽ không quay trở lại trang của bạn.

2) Phím xóa lùi không phải là phương thức duy nhất để trở về trang trước đó. Có những tổ hợp phím khác có thể thực hiện được điều tương tự, cũng như "nút quay lại" rõ ràng.

Đừng làm điều đó - nhưng nếu bạn phải, hãy sử dụng onbeforeunload() thay vì bẫy các phím cụ thể của trình duyệt.

Answer 4

Bạn chỉ cần sử dụng các đoạn mã sau đây để chặn không gian sau khi con trỏ đang ở trong các điều khiển bằng văn bản, điều khiển văn bản và mật khẩu.

function onKeyDown() 
{  
    if((event.altKey) || ((event.keyCode == 8) && 
     (event.srcElement.type != "text" && 
     event.srcElement.type != "textarea" && 
     event.srcElement.type != "password")) || 
     ((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82))) || (event.keyCode == 116)) { 
    event.keyCode = 0; 
    event.returnValue = false;} 
} 

Gọi chức năng này từ thẻ cơ thể onkeydown kiện

Answer 5

Giải pháp: Đặt đoạn mã sau vào cuối tất cả các trang của bạn có chứa các hình thức:

<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas --> 
<script type="text/javascript"> 
    function blockBackspaceAndEnter(e) { 
     if (!e) { // IE reports window.event instead of the argument 
      e = window.event; 
     } 
     var keycode; 
     if (document.all) { 
      // IE 
      keycode = e.keyCode; 
     } else { 
      // Not IE 
      keycode = e.which; 
     } 
     // Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password 
     if ((keycode == 8 
       && e.srcElement.type != "text" 
       && e.srcElement.type != "textarea" 
       && e.srcElement.type != "password") 
       || (keycode == 13 && e.srcElement.type != "textarea")) { 
      e.keyCode = 0; 
      if (document.all) { 
       // IE 
       event.returnValue = false; 
      } else { 
       // Non IE 
       Event.stop(e); 
      } 
     } 
    } 
    for (var i = 0; i < document.forms.length; i++) { 
     document.forms[i].onkeydown = blockBackspaceAndEnter; 
    } 
</script> 

tôi có các ý kiến ​​sau đây về những gì người khác đã trả lời ở đây trước:

Ai đó đã nói:

"Xin đừng. Người dùng thích backspace-to-go-back; . Đi lại được một trong những trình duyệt quan trọng nhất các tính năng và phá vỡ nó là intolerably thô lỗ"

câu trả lời của tôi với anh ấy là:

Vâng, thường người DO sử dụng back-nút để quay trở lại , NHƯNG KHÔNG trên các trang có HÌNH THỨC. Mặt khác, nó thực sự dễ dàng cho người vô tình nhấp vào gần hoặc bên ngoài một văn bản đầu vào hoặc textarea, và sau đó nhấn vào nút quay lại, vì vậy họ sẽ mất tất cả chỉnh sửa của họ, như người khác cũng nhận thấy:

"Người dùng không ở trong hộp văn bản và nhấn vào không gian , hoàn toàn mất tất cả thông tin biểu mẫu mà họ vừa mới nhập. Thường không phải là vấn đề, nhưng đối với chúng tôi, chúng tôi đang điền vào rất nhiều văn bản về các biểu mẫu trạng thái dài. "

Cùng hành vi không mong muốn cũng có thể nói về phím Enter để gửi biểu mẫu, mà thường là chỉ mong muốn (nếu bao giờ) cho các hình thức nhỏ với một vài lĩnh vực, nhưng không phải cho các hình thức với nhiều các trường và các hộp chọn và hộp nhập liệu và văn bản, trong đó hầu hết thời gian bạn KHÔNG muốn biểu mẫu được gửi khi bạn nhấn Enter.

Vì vậy, đây là lý do tại sao tôi đề xuất mã ở trên, áp dụng cho tất cả các thẻ FORM > chức năng được đề xuất bởi webster, nhưng không kiểm tra ALT, điều tôi không nghĩ là hữu ích và không có kiểm tra cho CTRL + N và CTRL + R và CTRL + F5, mà chúng ta không muốn chặn, bởi vì khi chúng được sử dụng chúng KHÔNG phải ngẫu nhiên.

Thật không may, mã ở trên không hoạt động trong Firefox khi bạn có DIV và BẢNG bên trong MẪU! Đó là vì sự kiện keydown dường như không được nhân giống với biểu mẫu có chứa, và thay vào đó hành vi mặc định (UNDESIRED!) Được áp dụng cho các phím Backspace và Enter. Tôi chưa thể tìm thấy giải pháp cho điều này ...

Answer 6

Rạp chiếu phim Filme Noi có câu trả lời đúng, nhưng mã ví dụ có chút thời gian. Tôi chỉ cần giải pháp này vì vậy tôi nghĩ rằng tôi sẽ đăng các mã tôi sử dụng.

//I use the standard DOM method for accessing the body tag, because the 
//non-standard HTML DOM shortcuts are not stable. The correct behavior is 
//dynamically attached to the entire body using the onkeypress event, which 
//is the most stable event to target cross browser. 
document.getElementsByTagName("body")[0].onkeypress = function (event) { 
    var a = event || window.event, //get event cross browser 
     b = a.target || a.srcElement; //get source cross browser 

    //the only thing that matters is the backspace key 
    if (a.keyCode === 8) { 

     //if you are a textarea or input type text or password then fail 
     if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) { 
      return true; 
     } else { 

      //backspace is disabled for everything else 
      return false; 
     } 
    } 
}; 

Mã này cần được thực thi trước khi người dùng bắt đầu tham gia trang. Có nhiều cách để thực hiện việc này:

1. Bạn có thể đặt mã ở trên vào bất kỳ chức năng nào đã được đính kèm vào sự kiện onload.
2. Bạn có thể quấn mã ở trên bị ràng buộc vào sự kiện tải của trang.
3. Bạn có thể đặt mã trên vào một chức năng tự thực thi.

Ví dụ:

//self executing function 
(function() { 
    the solution code here 
}()); 

//wrapper to onload event 
document.getElementsByTagName("body")[0].onload = function() { 
    the solution code here 
}; 

tôi thêm mã này vào Pretty Diff nếu bạn muốn xem một ví dụ trong hành động.

Answer 7

Cuối cùng tôi đã tìm thấy một trình duyệt hoạt động trên tất cả các trình duyệt.

Đó là bởi Hazem Saleh địa chỉ trang web của ông là: http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/

/*Starts here:*/ 

    document.onkeydown = function (event) { 

    if (!event) { /* This will happen in IE */ 
     event = window.event; 
    } 

    var keyCode = event.keyCode; 

    if (keyCode == 8 && 
     ((event.target || event.srcElement).tagName != "TEXTAREA") && 
     ((event.target || event.srcElement).tagName != "INPUT")) { 

     if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) { 
      event.stopPropagation(); 
     } else { 
      alert("prevented"); 
      event.returnValue = false; 
     } 

     return false; 
    } 
    }; 
/*Ends Here*/