JavaScript Learning Summary (22)--javascript shielded backspace key

Source: Internet
Author: User

Found today in IE browser, when using the readonly= "ReadOnly" property to set the text box to read-only <input type= "text" readonly= "readonly"/> There is a strange problem: if the cursor into a read-only text box, and then press the BACKSPACE key, it will jump to the previous page, the effect is like clicking the browser Back button back to the previous page, and in Firefox and Google no such problem appears, in order to solve this problem, Write a procedure like this, if the text box is read-only, then disable the BACKSPACE key.

The code is as follows:

1//Handling keyboard events prevents back key (Backspace) passwords or single-line, multiline text boxes except2functionBanbackspace (e) {3var ev = e | | window.event;//Get Event Object4var obj = Ev.target | | Ev.srcelement;//Get Event Source5var t = Obj.type | | Obj.getattribute (' type ');//Get Event Source Type6//Gets the event type as a criterion7var vreadonly = Obj.getattribute (' readonly ');8//Handling Null value Cases9 Vreadonly = (Vreadonly = = "")?False: vreadonly;10//When the BACKSPACE key is hit, the event source type is password or single line, multiline text,11//And the ReadOnly property is True or the Enabled property is False, the BACKSPACE key fails12var flag1= (Ev.keycode = = 8 && (t== "Password" | | t== "TEXT" | | t== "TEXTAREA")&& vreadonly== "ReadOnly")?TrueFalse;14//When the BACKSPACE key is hit, the event source type is non-password or single-line, multiline text, the BACKSPACE key is invalidated15var flag2= (Ev.keycode = = 8 && t! = "password" && t! = "text" && t! = "TEXTAREA")16?TrueFalse;1718//Judge19If(FLAG2) {20ReturnFalse;21st}22If(FLAG1) {23return false 24 } 25 }< Span style= "COLOR: #008080" >26 27 window.onload=function  () {28 // Disable back key action on Firefox, Opera29 document.onkeypress= banbackspace; 30 // No back key action on IE, chrome< Span style= "COLOR: #008080" >31 document.onkeydown=banbackspace;                 

With this processing, you can solve the "read-only input box under IE press the BACKSPACE key back to the previous page problem."

JavaScript Learning Summary (22)--javascript shielded backspace key

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.