Analog Jingdong express orders inquiry

Requirements: When we type in the text box, the text box above automatically display the contents of a large font size

Case study: 1, express a single number input, above a large font display box inside the text input box

2, while the inside express a single number value (value) is assigned to obtain over con box (the innerHTML) as a content

3, express a single number if the inside is empty, then hide large font box

4. Note: keydown and keypress in a text box which features two events when they are triggered, the text also does not fall into the text box, when keyup event-triggered, have fallen into the text inside the text box.

5, when we lose focus, and hid the box con

6, when we get the focus and the content of the text box is not empty, it shows the con box

Key Code:

1 large box size con css style triangle below

.con::before{
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
}

2, complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </ style>
</head>
<body> 
    <div class = " Search " > 
        <div class = " CON " > 123 </ div> 
        <the INPUT of the type = " text " placeholder = " Please enter your express orders " > 
    </ div> 
    <Script> // when typing express a single number, above the large font box (con) show (there's a larger font size)
         // form detecting user input: keyboard events to add to the form
         // at the same time to express a single number inside the values ( value) assigned to get over con box (innerText) as content
         // If you express a single number which is empty, then hide large font box (con) box var con = the Document.querySelector('
        
        .con');
        var input = document.querySelector('input');
        input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = the this .Value; 
                } 
            }) 
            // if we lose focus, to hide this box con 
        input.addEventListener ( ' Blur ' , function () { 
                con.style.display = ' none ' ; 
            }) 
            // when we obtained the focus, the displayed box con 
        input.addEventListener ( ' focus ' , function () {
             IF ( the this .Value! == ' ' ) { 
                con.style.display = ' Block ' ; 
            } 
        })
    </script>
</body>

Analog Jingdong express orders inquiry

Guess you like