Home > Developer > JavaScript
When you use the readonly= "ReadOnly" property to set the text box to read-only <input type= "text" readonly= "readonly"/> A problem occurs, if the cursor enters a read-only text box, Then press the BACKSPACE key, will jump to the previous page, the effect is like clicking the browser Back button to return to the previous page, the user experience is greatly compromised. to solve this problem, you can add the following processing method to the page, and if the text box is read-only, disable the BACKSPACE key.
The code is as follows:
<Scripttype= "Text/javascript"> //handling keyboard events prevents back key (Backspace) passwords or single-line, multiline text boxes except functionBanbackspace (e) {varEV=e||window.event;//get a valid event object varobj=Ev.target||ev.srcelement;//Get Event Source varT=Obj.type||Obj.getattribute ('type');//Get Event Source Type //gets the event type as a criterion varvreadonly=Obj.getattribute ('ReadOnly');//IE is true,chrome for ' readonly ' //alert ("vreadonly=" +vreadonly); //handling Null value casesvreadonly=(Vreadonly== "") ? false: vreadonly; //when the BACKSPACE key is hit, the event source type is password or single line, multiline text, //and the ReadOnly property is True or the Enabled property is False, the BACKSPACE key fails varFlag1=(Ev.keycode== 8 &&(t=="Password" ||T=="text" ||T=="textarea") &&(Vreadonly||vreadonly=="ReadOnly"))?true:false; //when the BACKSPACE key is hit, the event source type is non-password or single-line, multiline text, the BACKSPACE key is invalidated varFlag2=(Ev.keycode== 8 &&T!= "Password" &&T!= "text" &&T!= "textarea") ?true:false; //alert ("vreadonly=" +vreadonly+ ", flag1=" +flag1+ ", flag2=" +flag2 "); //Judging if(flag2) {return false; } if(FLAG1) {return false; }} window.onload=function(){ //Disable Back button action on Firefox, Opera //Document.onkeypress=banbackspace; //Disable back key action on IE, ChromeDocument.onkeydown=Banbackspace; } functionClickevent (e) {alert ("e="+e+", window.event="+window.event); varEV= "" ||window.event;//"", NULL, undefinedAlert ("ev="+ev); } </Script> <Body>writable text box:<inputtype= "text"value= "123"></BR></BR>read-only text box:<inputtype= "text"value= "123"ReadOnly= "ReadOnly"></BR></BR> <Buttontype= "button"name= "BTN"onclick= "clickevent ()">Button</Button> </Body>
Add:
1, the ReadOnly attribute in each browser difference:
IE: can get focus, cursor can enter, but cannot enter. Press the Backpace key when you get the focus, and the page will jump back.
Firefox browser: Can get focus, the cursor can enter, but cannot enter. Pressing the Backpace key while gaining focus has no effect.
Chrome: You can get focus, the cursor is not accessible.
2, using the Disable attribute, in each browser is: The cursor is not accessible. Better user experience. As long as the disabled keyword is valid, it can be unassigned, or even an assignment of NULL or FALSE indicates that disabled is valid.
<type= "text" name= "Email" disabled= "Disabled" >
To toggle the editable state of input, write the following code in JavaScript. Note the attr () method, not the prop () method.
false); // can be edited true); // do not edit
It is also important to note that when the Disable property is set to non-editable, the form submission is not automatically submitted to the background, and the Setter/getter method in the action does not take the value.
JavaScript masking BACKSPACE keys
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
