当前位置：网站首页>Use of form text box (II) input filtering (synthetic event)

Use of form text box (II) input filtering (synthetic event)

2022-07-05 20:33:00 【Red blue purple】

Use of form text boxes ( Two ) The input filter ( Composite event )

The input filter

Shielding character

scene ： The input box needs to limit the characters that appear , For example, it can only be numbers .

The input box itself does not have this function , But we can pass JavaScript To achieve . We can input characters into the input box , Rely on keyboard events , So you can add keyboard events , Then, according to the information of the event object, it is judged that the operator does not meet the conditions , disqualification , Just through event.preventDefault Block default events , Block input .

<body>
    <div class="input-box">
        <input type="text" size="10" maxlength="10">
    </div>

    <script>
        const ipt = document.getElementsByTagName('input')[0]

        ipt.addEventListener('keypress', (e) => {
            console.log(e.key)

            if (!/^\d/.test(e.key)) {
                e.preventDefault()
            }
        })
    </script>
</body>

The keyboard event we added above is keypress, because keyup It is a keyboard lift event , At this time, it has been entered into the input box , It doesn't work ; and keydown Recognize function keys , Therefore, the function keys must be allowed to pass , Otherwise, there is no way to delete the input . in addition ,keypress Support case sensitivity .

Processing shear plates

We have realized that only numbers can be entered , But if we copy non numeric data from outside , Pasting into the text box will break through our input filter .

At this time, we need to strengthen our input filtering through the clipboard event （HTML5 Added a clipboard event ）

copy： Triggered when a copy operation occurs
cut： Triggered when the cut operation occurs
paste： Triggered when the paste operation occurs

These three events are prefixed before The version is triggered before the operation of , But not often , I don't know any specific use situations . Blocking events can only be blocked in the three events triggered when they occur .

How to get the data of the shear board ？ Can pass event On the object clipboardData Object to get , To prevent unauthorized access to the clipboard , Can only be accessed during a clipboard event clipboardData object .

clipboardData There are 3 A way ：getDate、setData、clearData.

const ipt = document.getElementsByTagName('input')[0]

ipt.addEventListener('keypress', (e) => {
    console.log(e.key)

    if (!/^\d/.test(e.key)) {
        e.preventDefault()
    }
})

ipt.addEventListener('copy', (e) => {
    // e.clipboardData.setData The first parameter is the format , The second parameter is the copied content 
    e.clipboardData.setData('text/plain', ' Duplicate false data ')

    //  Mask out default events , Copy fake data 
    e.preventDefault()
})

ipt.addEventListener('paste', (e) => {
    //  Read the data of the shear board 
    const text = e.clipboardData.getData('text/plain')

    //  Do not paste if the conditions are not met 
    if (!/^\d/.test(text)) {
        e.preventDefault()
    }
})

It looks like , Even the pasted data can only be input into the input box if it is a number .

Dealing with Chinese 、 Japanese and other input methods

When we use input methods , It will still bypass our limit of only entering numbers .

Here is an interesting knowledge point Composite event

In Chinese, you need to press multiple keys at the same time to input a character . Synthetic events are used to detect and control this input , The input character is in the... Of the event object data in .

compositionstart： Indicates that input is about to begin , here data For the empty string
compositionupdate： Triggered when a new character is inserted , here data Characters entered for
compositionend： Indicates that normal keyboard input is about to be restored , here data For the text to be entered into the input box

practice ：

const ipt = document.getElementsByTagName('input')[0]

ipt.addEventListener('compositionstart', (e) => {
    console.log('%c%s', 'color: red;font-size: 16px;', 'conpositionstart')
    console.log(e.data)
})

ipt.addEventListener('compositionupdate', (e) => {

    console.log('%c%s', 'color: blue;font-size: 16px;', 'compositionupdate')
    console.log(e.data)

    
})

ipt.addEventListener('compositionend', (e) => {
    console.log('%c%s', 'color: purple;font-size: 16px;', 'compositionend')

})

So we can at the end of the composite event , namely compositionend In the event handler of , Remove the input Chinese , It is not allowed to input Chinese characters .

const ipt = document.getElementsByTagName('input')[0]

ipt.addEventListener('compositionend', (e) => {
    //  Remove the last few digits 
    e.target.value = e.target.value.slice(0, -e.data.length)
})

Complete code

<body>
    <div class="input-box">
        <input type="text" size="10" maxlength="10">
    </div>

    <script>
        const ipt = document.getElementsByTagName('input')[0]

        ipt.addEventListener('keypress', (e) => {
            console.log(e.key)

            if (!/^\d/.test(e.key)) {
                e.preventDefault()
            }
        })

        ipt.addEventListener('paste', (e) => {
            //  Read the data of the shear board 
            const text = e.clipboardData.getData('text/plain')

            //  Do not paste if the conditions are not met 
            if (!/^\d/.test(text)) {
                e.preventDefault()
            }
        })

        ipt.addEventListener('compositionend', (e) => {
            //  Remove the last few digits 
            e.target.value = e.target.value.slice(0, -e.data.length)
        })
    </script>
</body>