欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能

 更新時(shí)間:2021年09月29日 17:02:02   作者:qq_39111074  
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡(jiǎn)單,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

有時(shí)輸入框較小,希望輸入內(nèi)容后,出現(xiàn)一個(gè)有放大輸入內(nèi)容的提示框

實(shí)現(xiàn)思路

  • 頁(yè)面上先編寫(xiě)出提示框,然后將提示框的css屬性:display設(shè)置成none,隱藏起來(lái)
  • 獲取輸入框元素對(duì)象、信息提示框元素對(duì)象
  • 為輸入框元素對(duì)象綁定鍵盤(pán)事件- - -keyup,
  • 事件處理程序:判斷輸入的內(nèi)容是否為空,不為空- - -將輸入框的內(nèi)容賦值給信息提示框,并設(shè)置信息提示框顯示:display設(shè)置成block;為空,設(shè)置提示框不顯示
  • 添加獲取焦點(diǎn)和失去焦點(diǎn)事件。
  • blur- - -失去焦點(diǎn):鼠標(biāo)不選中輸入框,輸入框中無(wú)光標(biāo)閃爍時(shí),設(shè)置信息提示框不顯示:display設(shè)置成none
  • focus- - -獲取焦點(diǎn):鼠標(biāo)點(diǎn)擊輸入框,輸入框中有光標(biāo)閃爍時(shí),判斷一下,如果輸入框有內(nèi)容,信息提示框顯示;

注意這里是鍵盤(pán)松開(kāi)事件,不要用鍵盤(pán)按下事件:keydown或keypress,按下時(shí)還沒(méi)有將打的字錄入,鍵盤(pán)松開(kāi)時(shí),才會(huì)錄入打的字

代碼示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模擬京東快遞單號(hào)查詢</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            outline-style: none;
        }
        
        .search {
            position: relative;
            width: 220px;
            margin: 100px auto;
        }
        
        .info {
            display: none;
            position: absolute;
            top: -40px;
            left: 0;
            width: 170px;
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
        }
        
        .info::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-color: #fff transparent transparent;
            border-style: solid dashed dashed;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="info">(*´▽`)ノノ</div>
        <input type="text" class="express" placeholder="請(qǐng)輸入要查詢的快遞單號(hào)">
        <input type="button" value="查詢">
    </div>
    <script>
        var expressNo = document.querySelector('.express');
        var info = document.querySelector('.info');


        expressNo.addEventListener('keyup', function() {
            console.log(expressNo.value);
            console.log(info.innerHTML);
            if (this.value == '') {
                info.style.display = 'none';
            } else {
                info.style.display = 'block';
                info.innerHTML = this.value;
            }
        });


        // 失去焦點(diǎn),隱藏盒子
        expressNo.addEventListener('blur', function() {
            info.style.display = 'none';
        })

        //獲得焦點(diǎn)事件,顯示盒子
        expressNo.addEventListener('focus', function() {
            if (this.value !== '') {
                info.style.display = 'block';
            }
        })
    </script>
</body>

</html>

頁(yè)面效果:

快遞單號(hào)查詢.gif

到此這篇關(guān)于javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能的文章就介紹到這了,更多相關(guān)js輸入框內(nèi)容提示及隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論