Home > Developer > Web Develop
The topic is more obscure, to a picture to illustrate the effect to express:
The effect of the first picture is that the user enters a number, which shows a large layer, and then displays the number entered and divides the number with spaces in each of the four bits. It seems to have this effect on CCB's online banking. The effect of the second figure is that the user enters a string of numbers in a text box, and then the cursor leaves, the number according to each three bits separated by commas, similar to the money input effect of foreigners.
Effect one synchronous display split split inputIn this effect, the imitation is the input bank clip class, it can only enter the number, you need to disable the user input of other characters below are several implementation methods. Paste the HTML and CSS code first:
1 <HTML>2 <Head>3 <styletype= "Text/css">4 #gaoLiang{5 width:400px;6 Height:50px;7 font-family:Candara;8 Color:Red;9 font-size:20px;Ten text-align:Center; One Line-height:50px; A Display:None*/* This layer mode is hidden * / - Border:1px solid Red; - } the </style> - </Head> - - <Body> + <DivID= "Gaoliang"></Div> -Card<inputtype= "text"ID= "Kahao" /> + </Body> A </HTML>
Implementation method One: Just use the keyboard onkeydown Event
This event is triggered when the user presses the keyboard, that is, there is no user input on the interface, but the event object can be used to obtain data entered by the user. To solve the problem is to manually put the user input data to the interface, there is to consider when the user chooses to delete by the BACKSPACE key Delete or with the mouse to select later deleted. The JS code is as follows:
1document.getElementById (' Kahao '). onkeydown = Kahao;//Registering Event Methods2 3 functionKahao (evt) {4 varE = EVT | |window.event;5 //If the user enters a non-numeric or backspace bar, the input is blocked6 if((E.keycode < | | e.keycode>57) && E.keycode! = 8){7 return false;8 };9 //get the value that already exists in the current text boxTen varValue = This. Value; One //determine if the input is the backspace bar A if(E.keycode = = 8){ - //if it's backspace, delete the selected text or the last one. Because in the KeyDown event, the value of the interface is changed after executing the code first - varS= ""; the //get the text that the user chooses to delete - if(typeof This. SelectionStart = = ' Number '){ -s = This. value.substring ( This. SelectionStart, This. selectionend); -}Else if(Document.selection.createRange) {//IE8 and below +s =Document.selection.createRange (). text; - }; + //If you do not select a length of 0, then delete the last A if(S.length = = 0){ ats = Value.charat (value.length-1) - }; - //Execute Delete Data -Value = Value.replace (S, ' '); -}Else{ - //If you do not delete the key to the current character splicing up, because JS in the plus operator priority to consider the number, all ToString () in //Ie6~8 does not support E.key. - //value = this.value.toString () + E.key; toValue = This. value.tostring () +String.fromCharCode (e.keycode); + }; - the varLine//A numeric string used to hold a regular match * varStrs=[];//storing strings that are already in advance $ varReg =/(\d{1,4})/g;//the regular. Using exec to match, you can use replace more simply, in the next way to usePanax Notoginseng while(line =reg.exec (value))) { -Strs.push (line[0]); the }; + //according to the regular, four numbers for a group to split, because the match failed, returned a null, directly resulting in the subsequent join error, it is not used A //STRs = Value.match (reg); the //Stitching by Space +Value = Strs.join (' '); - //get layers to set up and display $ varGao = document.getElementById (' Gaoliang '); $gao.innerhtml = value;//innerHTML Basically does not have a browser compatibility issue, so use it -Gao.style.display = ' block '; -};OnKeyDown Method Implementation
The trouble with this approach is that when users delete data, they have to judge, and there are browser compatibility issues. There is the need to splice user input data, but it is very good synchronization
Implementation mode Two: just use the keyboard onkeyup EventIn the KeyUp event, compared to the relatively simple, reference when this event triggered, the user entered the value is already on the interface, we can directly get to. And if the user is deleted, also do not need to delete the relationship by the mouse check or directly press the BACKSPACE key to delete, because when the delete key lifted up, the data on the interface has been deleted. The code is as follows:
1document.getElementById (' Kahao '). onkeyup = Kahaotwo;//Registering Event Methods2 3 functionKahaotwo (evt) {4 varE = EVT | |window.event;5 6 //use regular to replace non-numeric characters entered by the user7 This. Value = This. Value.replace (/[^\d]*/g, ");8 9 //to replace with a regular, (=\d) is required, if the match is successful, then the previous matching four digits must be followed by a number. You can change the space you replace with a comma or some other character to see if there is any difference between the matching requirement in the regular.TenValue = This. Value.replace (/(\d{4}) (? =\d)/g, ' $ ') One A varGao = document.getElementById (' Gaoliang '); -gao.innerhtml =value; -Gao.style.display = ' block '; the};OnKeyUp Method Implementation
In this way of implementation, there is a bad thing is that when the user input non-digital, with the regular to replace, because the input character is already in the interface, suddenly no, experience bad.
Internship method Three: The combination of the above two waysCombined with the advantages of the above two methods, you can then keydown the following to determine the user's illegal input, in the KeyUp face the data to replace, the code is as follows:
1document.getElementById (' Kahao '). onkeydown =Kahaothreedown;2document.getElementById (' Kahao '). onkeyup =Kahaothreeup;3 4 functionKahaothreedown (evt) {5 vare= EVT | |window.event;6 if(E.keycode > | | e.keycode<48) && e.keycode!=8){7 return false;8 };9 };Ten One functionKahaothreeup () { A varGao = document.getElementById (' Gaoliang '); -gao.innerhtml = This. Value.replace (/(\d{4}) (? =\d)/g, ' $ '); -Gao.style.display = ' block '; the};
Effect two divide numbers by right-to-left after user input is complete
When the user input is complete, it represents the loss of focus and can be registered with a onblur event to complete. Since the use of the regular, and the default is a left-to-right matching (perhaps can be right-to-left matching, but I do not know), the title of the requirement is split from right to left, all the code in the first string to reverse processing, after the success of the split after a rollover is OK. The code in JS is as follows:
1Docuemnt.getelementbyid (' Nums '). onblur =Splitnum;2 3 functionSplitnum (evt) {4 varValue = This. Value;5 //First, replace all non-numeric values except the decimal point6Value = Value.replace (/[^ (\d.)] */g, ");7 //The string does not have a reversal method, so we need to turn to the array first8Value = Value.split ("). Reverse (). Join (');9 //you can try not to add the following (? =\d), the problem will occur when the number entered is exactly 3 of the integer timesTenValue = Value.replace (/(\d{3}) (? =\d)/g, ' $ '); One This. Value = Value.split ("). Reverse (). Join ('); A};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
