11 Examples of Advanced Usage of Input Elements in Web Forms

11 Examples of Advanced Usage of Input Elements in Web Forms

1. Cancel the dotted box when the button is pressed <br />Add the attribute value hideFocus or HideFocus=true in the input
2. Read-only text box content <br />Add the attribute value readonly to input
3. Prevent the TEXT document from being cleared when going back (the style content can be used as a class reference)
<INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>
4. The ENTER key moves the cursor to the next input box
<input onkeydown="if(event.keyCode==13) event.keyCode=9" >
5. Only Chinese (flashing)
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13) event.keyCode=9">
6. Only numbers (flashing)
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7. Only numbers (no flashing)
<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13) event.keyCode=9" onKeyPress="if ((event.keyCode<48 event.keyCode>57)) event.returnValue=false">
8. Only English and numbers can be entered (flashing)
<input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
9. Block input method
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13) event.keyCode=9">
10. Only numbers, decimal points, and minus signs (-) can be entered (no flashing)
<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 event.keyCode>57)) event.returnValue=false">
11. Only two decimal places or three decimal places can be entered (flashing)
<input maxlength=9 onkeyup="if(value.match(/^\d{3}$/)) value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" onKeyPress="if((event.keyCode<48 event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 value.match(/^\d{3}$/) /\.\d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe name=text_kfxe>

<<:  Detailed explanation of the difference between MySQL normal index and unique index

>>:  CSS multi-level menu implementation code

Recommend

Detailed explanation of desktop application using Vue3 and Electron

Table of contents Vue CLI builds a Vue project Vu...

Implementation example of Nginx+Tomcat load balancing cluster

Table of contents introduction 1. Case Overview 2...

Docker dynamically exposes ports to containers

View the IP address of the Container docker inspe...

Detailed explanation of mysql backup and recovery

Preface: The previous articles introduced the usa...

How to use Vue+ElementUI Tree

The use of Vue+ElementUI Tree is for your referen...

How to configure Http, Https, WS, and WSS in Nginx

Written in front In today's Internet field, N...

A brief discussion on the optimization of MySQL paging for billions of data

Table of contents background analyze Data simulat...

Detailed steps to install mysql in Win

This article shares the detailed steps of install...

How does Vue download non-same-origin files based on URL

Generally speaking, we can have the following two...

MySql implements page query function

First of all, we need to make it clear why we use...

MySQL learning notes: data engine

View the engines supported by the current databas...

MySQL log system detailed information sharing

Anyone who has worked on a large system knows tha...

Linux sftp command usage

Concept of SFTP sftp is the abbreviation of Secur...