案例：模擬京東快遞單號查詢字體放大顯示

案例：模擬京東快遞單號查詢

在文本框中輸入內容時，文本框上面自動顯示大字號的內容。

動圖展示：

在這里插入圖片描述

代碼展示：

<p>案例：模擬京東快遞單號查詢</p>
<div class="search">
     <div class="con"></div>
     <input type="text" placeholder="請輸入您的快遞單號" class="jd">
</div>
<script>
    // 獲取要操作的元素
    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    // 給輸入框注冊keyup事件
    jd_input.addEventListener('keyup', function () {
        // 判斷輸入框內容是否為空
        if (this.value == '') {
            // 為空，隱藏放大提示盒子
            con.style.display = 'none';
        } else {
            // 不為空，顯示放大提示盒子，設置盒子的內容
            con.style.display = 'block';
            con.innerText = this.value;
        }
    })
    // 給輸入框注冊失去焦點事件，隱藏放大提示盒子
    jd_input.addEventListener('blur', function () {
        con.style.display = 'none';
    })
    // 給輸入框注冊獲得焦點事件
    jd_input.addEventListener('focus', function () {
        // 判斷輸入框內容是否為空
        if (this.value !== '') {
            // 不為空則顯示提示盒子
            con.style.display = 'block';
        }
    })
</script>

本文鏈接：https://blog.csdn.net/chuenst/article/details/110928716

智能推薦

vue-上傳圖片-前端實現預覽-放大顯示-增加、刪除

本來想用elementUI的組件，結果發現，上傳圖片受限制太多。利用< input type=“file”/>改造一個類型功能的上傳圖片預覽大圖插件： ‘v-viewer’，在另外一篇文章有介紹效果圖：代碼如下： html： data： js: css:...

layim移動端使用layer.open實現點擊圖片放大顯示

layer的官網：https://www.layui.com/doc/modules/layer.html#layer.close 在過程中發現shade的值直接用數字改變透明度或者定義別的顏色和透明度，實際遮罩的透明度都不變。折騰了下，發現使用的是layer-mobile.js，其中定義了遮罩的顏色以及透明度是通過行內樣式設置的。所以要改變遮罩的顏色和透明度就要設置shade的值是完整的行內樣...

Vue中使用v-Viewer縮略圖放大顯示原圖

1.首先安裝插件 2.在main.js中配置 3.在vue文件中使用時 4.效果圖...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...