javascript實現輸入框內容提示及隱藏功能

有時輸入框較小，希望輸入內容後，出現一個有放大輸入內容的提示框

實現思路

頁面上先編寫出提示框，然後將提示框的屬性：display設定成none，隱藏起來
獲取輸入框元素物件、資訊提示框元素物件
為輸入框元素物件繫結鍵盤事件- - -keyup,
事件處理程式：判斷輸入的內容是否為空，不為空- - -將輸入框的內容賦值給資訊提示框，並設定資訊提示框顯示：display設定成block；為空，設定提示框不顯示
新增獲取焦點和失去焦點事件。
blur- - -失去焦點：滑鼠不選中輸入框，輸入框中無游標閃爍時，設定資訊提示框不顯示：display設定成none

focus- - -獲取焦點：滑鼠點選輸入框，輸入框中有游標閃爍時，判斷一下，如果輸入框有內容，資訊提示框顯示；

注意這裡是鍵盤松開事件，不要用鍵盤按下事件：keydown或keypress，按下時還沒有將打的字錄入，鍵盤松開時，才會錄入打的字

程式碼示例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">www.cppcns.com 
;
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>模擬京東快遞單號查詢</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,.2);
            box-shadow: 0px 2px 4px rgba(0,.2);
        }
        
  NVVMgL 
      .info::before {
            content: '';
    NVVMgL        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="請輸入要查詢的快遞單號">
        <input type="button" value="查詢http://www.cppcns.com">
    </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;
            }
        });


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

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

</html>

頁面效果：

快遞單號查詢.gif

到此這篇關於實現輸入框內容提示及隱藏功能的文章就介紹到這了,更多相關輸入框內容提示及隱藏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

javascript實現輸入框內容提示及隱藏功能

javascript實現輸入框內容提示及隱藏功能

JavaScript獲取輸入框內容

Vue 實現輸入框新增搜尋歷史記錄功能

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

獲取輸入框游標位置及指定位置插入內容

(轉)實現輸入框類似百度搜索的智慧提示效果

JavaScript實現密碼框輸入驗證

vue實現輸入框自動跳轉功能

vue this.$set實現輸入框的互斥效果

CSS :placeholder-shown偽類實現輸入框浮動文字效果

vue 輸入框限制中英文及數字

alert獲取輸入框內容_實用開源：Web 聊天工具的富文字輸入框

JavaScript實現隨機生成驗證碼及校驗

JavaScript實現訊息框示例

JavaScript實現下拉選單的顯示隱藏

Javascript實現登入框拖拽效果

原生JS實現登入框郵箱提示

JavaScript實現密碼框驗證資訊

基於JavaScript實現密碼框驗證資訊

直播app系統原始碼，輸入完內容後自動隱藏軟鍵盤

javascript實現輸入框內容提示及隱藏功能

相關推薦