Recently H5 development, using the amount input box, but did not customize the amount of keyboard, so use type= "number" to call the system's numeric keypad.
requirements, the user is not able to enter in addition to the number of other content, the amount can only be entered into the decimal point two bits.
Therefore, some, number keyboard, when the user entered a non-numeric, the value is empty, but the input box is displayed by the user input content.
For example: The user enters a, the channel value is empty, but the input box shows A; special case (when the user enters 2, the value is 2 and the input box is 2.)
<!DOCTYPE HTML><HTML><Head><title>Demo5</title><MetaCharSet= "Utf-8"><Metaname= "Apple-mobile-web-app-capable"content= "Yes" /><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><styletype= "Text/css"></style></Head><!--disable replication and remove some unnecessary factors -<BodyOnpaste= "return false"> <Div><inputtype= ' number 'ID= ' number '></Div></Body><Scripttype= "Text/javascript"> varMe=window; (functioninit () {Me.number=GetId (' Number'); ME.N= "'; Initevent (); functioninitevent () {Me.number.addEventListener ('KeyUp', number,false); } functiongetId (ID) {returndocument.getElementById (ID); } functionNumber () {//Amount,Console.log ( This. Value); if( This. Value== "'){//Verify that the value of the input box is a number when the user enters it, and when it is not a number, the null is taken. This. Value="'; This. Value=ME.N; return } if(!/^\d{0,9}\. {0,1} (\d{1,2})? $/. Test ( This. Value)) {//Check no more than two decimal places This. Value=ME.N; } if(Window.event.keyCode!= 8){ if( This. Value%1==0 &&ME.N== This. Value) {//when the user presses the non-delete key, the new value is the same as the old value, and the old value is an integer return } if(Me.n.indexof (".")>-1 &&ME.N== This. Value) {//when the user presses the non-delete key, the new value is the same as the old value, and the old value is a decimal This. Value="'; This. Value=ME.N; return } }Else{ if(Me.n.indexof (".")>-1 && This. Value.indexof (".")<0){//When you press DELETE, the decimal point is deletedME.N= This. Value; return}} ME.N= This. Valueif(Me.n.indexof (".")>0){ This. Value=ME.N; } } }())</Script></HTML>
You can try it, so you can limit the user's input
Mobile development, H5 some processing of number input box
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
