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

Causes and solutions for front-end exception 502 bad gateway

Table of contents 502 bad gateway error formation...

Docker container introduction

1. Overview 1.1 Basic concepts: Docker is an open...

The forgotten button tag

Note: This article has been translated by someone ...

Linux uses binary mode to install mysql

This article shares the specific steps of install...

React implements a highly adaptive virtual list

Table of contents Before transformation: After tr...

How to set up FTP server in CentOS7

FTP is mainly used for file transfer, and is gene...

Docker container exits after running (how to keep running)

Phenomenon Start the Docker container docker run ...

HTML Tutorial: Unordered List

<br />Original text: http://andymao.com/andy...

Steps to completely uninstall the docker image

1. docker ps -a view the running image process [r...

Solve the mysql user deletion bug

When the author was using MySQL to add a user, he...

About Vue's 4 auxiliary functions of Vuex

Table of contents 1. Auxiliary functions 2. Examp...

How to use Webstorm and Chrome to debug Vue projects

Table of contents Preface 1. Create a new Vue pro...

MySQL scheduled task example tutorial

Preface Since MySQL 5.1.6, a very unique feature ...