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

Code comment writing standards during web page production

<br />I have summarized the annotation writi...

Implementation of interactive data between QT and javascript

1. Data flows from QT to JS 1. QT calls the JS fu...

How to view the creation time of files in Linux

1. Introduction Whether the creation time of a fi...

HTML design pattern daily study notes

HTML Design Pattern Study Notes This week I mainl...

js tag syntax usage details

Table of contents 1. Introduction to label statem...

Nginx domain forwarding usage scenario code example

Scenario 1: Due to server restrictions, only one ...

Set IE8 to use IE7 style code

<meta http-equiv="x-ua-compatible" co...

MySQL/MariaDB Root Password Reset Tutorial

Preface Forgotten passwords are a problem we ofte...

Native JavaScript message board

This article shares the specific code of JavaScri...

Introduction to /etc/my.cnf parameters in MySQL 5.7

Below are some common parameters of /etc/my.cnf o...

win10 mysql 5.6.35 winx64 free installation version configuration tutorial

mysql 5.6.35 winx64 free installation version con...

Mini Program to Implement Calculator Function

This article example shares the specific code of ...

Example of how to implement underline effects using Css and JS

This article mainly describes two kinds of underl...

The complete version of the common Linux tool vi/vim

Why learn vim Linux has a large number of configu...

Tutorial on installing Ubuntu 20.04 and NVIDIA drivers

Install Ubuntu 20.04 Install NVIDIA drivers Confi...