Yesterday, the blogger received a request saying that there are some input boxes in the form form. You have to limit it. Do n’t, for example, some restrictions can only allow him to enter numbers, not customers.
I provide you with two methods to achieve this function.Of course, I will explain the phenomenon to you here:
1. I believe that many front-end frameworks have integrated third-party component libraries. Here are some examples of iview used in my project.
iview has a numeric input text box:<InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
This is the easiest method, but in many cases, due to style and other factors, you cannot use the active component functions of the component library.Here I provide you with a second method
2. Regular expression judgment method
The second way is regular expression judgment:oninput="this.value=this.value.replace(/^\D*([0-9]\d*\.?\d*)?.*$/,'$1')"
Note: The regular expression judgment method needs to use the native input input box, and the input box of iview or the input box of element should have no effect
The meaning of this regular expression is now the input of English and text
You can see the parameter oninput, I will explain to you:
Mouse events
- onclick: Event handler called when the user clicks on an object.
- oncontextmenu: triggered when the user clicks the right mouse button to open the context menu
- ondblclick: The event handler called when the user double-clicks an object.
- onmousedown: The mouse button was pressed.
- onmouseenter: triggered when the mouse pointer moves over the element
- onmouseleave: triggered when the mouse pointer moves out of the element
- onmousemove: The mouse is moved.
- onmouseover: Mouse over an element.
- onmouseout: The mouse moves away from an element.
- onmouseup: The mouse button is released.
Keyboard events
- onkeydown: A keyboard key was pressed.
- onkeypress: a keyboard key is pressed and released
- onkeyup: A keyboard key is released.
Frame / object events
- onabort: Image loading is interrupted. ()
- onbeforeunload: This event is triggered when the page is about to leave (refresh or close)
- onerror: An error occurred while loading the document or image. ( , with )
- onhashchange This event is triggered when the anchor part of the current URL is modified.
- onload A page or an image is loaded.
- onpageshow This event is triggered when the user visits the page
- onpagehide This event is triggered when the user leaves the current page and jumps to another page
- onresize The window or frame is resized.
- onscroll Event that occurs when the document is scrolled.
- onunload user exit page. ( with )
Form event
- onblur: triggered when the element loses focus
- onchange: This event is triggered when the content of the form element changes (,,, and)
- onfocus: triggered when the element gets focus
- onfocusin: triggered when the element is about to gain focus
- onfocusout: triggered when the element is about to lose focus
- oninput: triggered when the element gets user input
- onreset: triggered when the form is reset
- onsearch: triggered when the user enters text into the search field (<input = “search”>)
- onselect: triggered when the user selects text (and)
- onsubmit: triggered when the form is submitted
Clipboard events
- oncopy: This event is triggered when the user copies the content of the element
- oncut: This event is triggered when the user cuts the content of the element
- onpaste: This event is triggered when the user pastes the element content
Print events
- onafterprint: This event is triggered when the page has started printing, or the print window has been closed
- onbeforeprint: This event is triggered when the page is about to start printing
Drag event
- ondrag: This event is triggered when the element is being dragged
- ondragend: This event is triggered when the user finishes dragging the element
- ondragenter: This event is triggered when the dragged element enters the drop target
- ondragleave: This event is triggered when the drag element leaves the drop target
- ondragover: This event is triggered when the drag element is placed on the target
- ondragstart: This event is triggered when the user starts dragging an element
- ondrop: This event is triggered when the drag element is placed in the target area
Multimedia events
- onabort: The event is triggered when video / audio (audio / video) terminates loading.
- oncanplay: The event is triggered when the user can start playing video / audio (audio / video).
- oncanplaythrough: The event is triggered when audio / video can be played normally without pausing and buffering.
- ondurationchange: The event is triggered when the duration of audio / video changes.
- onemptied: triggered when the current playlist is empty
- onended: The event is triggered at the end of audio / video playback.
- onerror: Event is triggered when an error occurs during audio / video data loading.
- onloadeddata: The event is triggered when the browser loads the current frame of video / audio (audio / video).
- onloadedmetadata: The event is triggered after the metadata of the specified video / audio (audio / video) is loaded.
- onloadstart: The event is triggered when the browser starts looking for the specified video / audio (audio / video).
- onpause: The event is triggered when audio / video is paused.
- onplay: The event is triggered when the audio / video starts playing.
- onplaying: The event is triggered when the audio / video is paused or ready to restart playback after buffering.
- onprogress: The event is triggered when the browser downloads the specified video / audio (audio / video).
- onratechange: Event is triggered when the playback speed of audio / video changes.
- onseeked: The event is triggered after the user repositions the playback position of audio / video.
- onseeking: The event is triggered when the user starts to reposition audio / video.
- onstalled: Event is triggered when the browser gets media data, but the media data is not available.
- onsuspend: The event is triggered when the browser reading media data is suspended.
- ontimeupdate: The event is triggered when the current playback position sends a change.
- onvolumechange: The event is triggered when the volume changes.
- onwaiting: The event is triggered when the video needs to be buffered due to the next frame being played.
Animation event
- animationend: This event is triggered when the CSS animation ends
- animationiteration: This event is triggered when the CSS animation repeatedly plays
- animationstart: This event is triggered when the CSS animation starts to play
Transitional event
- transitionend: This event is triggered after the CSS completes the transition.
Other events
- onmessage: This event
is triggered when a message is received through or from an object (WebSocket, Web Worker, Event Source or child frame or parent window) - onmousewheel: Discontinued. Use onwheel event instead
- ononline: This event is triggered when the browser starts working online.
- onoffline: This event is triggered when the browser starts working offline.
- onpopstate: This event is triggered when the browsing history (history object) of the window changes.
- onshow: when the event
- onstorage: This event is triggered when Web Storage (HTML 5 Web storage) is updated
- ontoggle: This event is triggered when the user opens or closes the element
- onwheel: This event is triggered when the mouse wheel scrolls up and down the element
I have listed all the events for everyone, I suggest that you still go to understand, the blogger just started using the onkeyup event, and later found that the mac can achieve the input input box to limit the input of numbers only, but on ordinary windows system computers , You can enter English if you enter the Chinese character and press Enter.After repeated tests, it is found that oninput meets the demand, but a little flashing effect will appear on the mac, which does not affect the operation!
