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

JavaScript to achieve digital clock effects

This article example shares the specific code for...

Javascript basics about built-in objects

Table of contents 1. Introduction to built-in obj...

Detailed explanation of Docker Swarm service orchestration commands

1. Introduction Docker has an orchestration tool ...

20 JS abbreviation skills to improve work efficiency

Table of contents When declaring multiple variabl...

Implementation of webpack code fragmentation

Table of contents background CommonsChunkPlugin s...

Example of using store in vue3 to record scroll position

Table of contents Overall Effect Listen for conta...

Four categories of CSS selectors: basic, combination, attribute, pseudo-class

What is a selector? The role of the selector is t...

The implementation process of ECharts multi-chart linkage function

When there is a lot of data to be displayed, the ...

How to encapsulate the table component of Vue Element

When encapsulating Vue components, I will still u...

A simple way to call desktop exe programs on a web page

This article mainly introduces how to call desktop...

Detailed tutorial on downloading mysql on Windows 10

MySQL versions are divided into Enterprise Editio...

js uses the reduce method to make your code more elegant

Preface In actual projects, the most common proce...

How to run Hadoop and create images in Docker

Reinventing the wheel, here we use repackaging to...

Share 10 of the latest web front-end frameworks (translation)

In the world of web development, frameworks are ve...