Javascript小案例（一）：仿淘寶搜尋框使用者輸入事件的實現

阿新 • • 發佈：2019-01-16

淘寶是我們經常用的一個網上購物平臺，開啟淘寶網首頁，找到淘寶首頁的搜尋框，如下如所示：

這裡寫圖片描述

（截圖日期：2017年6月18日）

大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空文字框的所有內容的時候，灰色字自動恢復。

接下來，這個小案例就是要介紹如何實現這種效果，即使用者輸入事件。

判斷使用者輸入的事件有 oninput 和onpropertychange 。當然，想必你能想到，由於瀏覽器相容的問題，他們出現的場合有所不同。 正常瀏覽器支援oninput ，而 IE6、IE7、IE8 支援的 onpropertychange 。

為了節省時間，不再模仿淘寶CSS樣式。

程式碼及解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判斷使用者輸入事件第2遍oninput 和onpropertychange 的用法</title>
</head>
 <style>
        .search {
            width:300px;
            height: 30px;
            margin 
: 100px auto;
            position: relative;
        }
        .search input {
            width:200px;
            height:25px;

        }
        .search label {
            font-size: 12px;
            color:#ccc;
            position: absolute;
            top:8px;
            left:10px;
            cursor 
: text;
        }
    </style>
    <script type="text/javascript">
    業務邏輯分析：
//           1.內容為空時，游標和預設字顯示在搜尋框。自動獲取焦點
//           2.當輸入內容時，預設字消失。用oninput事件

        window.onload = function () {
            function $(id){ return document.getElementById(id);}
            $("txt").focus();//自動獲取游標方法
            $("txt").oninput = $("txt").onpropertychange = function () {
            //oninput 大部分瀏覽器支援  檢測使用者表單輸入內容
            //onpropertychange  ie678  檢測使用者表單輸入內容
                if ( this.value == ""){
                    // 首先判斷文字框裡的值是否為空。注意用雙等號！
                    $("message").style.display = "block";
                } else {
                    $("message").style.display = "none";
                }
            }
        }
    </script>  
<body>
<div class="search">
    <input type="text" id="txt">
    <label for="txt" id="message">仿淘寶搜尋框</label>
    <!-- 注意label 中for屬性 值指向 input 的id值 ，意思是把label標籤和input表單相關聯。
    label 元素不會向用戶呈現任何特殊效果。當用戶在label元素內點選文字， 瀏覽器就會自動將焦點轉到和標籤相關聯的表單控制元件上。 -->
</div>
</body>
</html>

效果：

這裡寫圖片描述

不積跬步無以至千里，一個大的網站就是由一個一個小的功能做起來的，重在實戰，重在敲程式碼，一個案例敲三遍，直到爛熟於心，相信日積月累，一定可以成為大牛。自勉，共勉。謝謝！

Javascript小案例（一）：仿淘寶搜尋框使用者輸入事件的實現

淘寶是我們經常用的一個網上購物平臺，開啟淘寶網首頁，找到淘寶首頁的搜尋框，如下如所示：（截圖日期：2017年6月18日）大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空

Javascript：仿淘寶搜尋框使用者輸入事件的實現

開啟淘寶網首頁，找到淘寶首頁的搜尋框，大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空文字框的所有內容的時候，灰色字自動恢復。接下來，這個小案例就是要介紹如何實現這種效果，即使用者輸入事件。判斷使用者輸入的事件有 oni

【Android開發—電商系列】（二）：仿淘寶商品屬性標籤頁

一睹為快　　　　　　需求 1.動態載入屬性，如尺碼，顏色，款式等　　由於每件商品的屬性是不確定的，有的商品的屬性是顏色和尺碼，有的是口味，有的是大小，所以這些屬性不能直接寫死到頁面上。 2.動態載入屬性下的標籤

JavaScript 資料結構（一）：連結串列

前言從實用性角度來說，連結串列對Javascript 來說沒有任何價值，為什麼呢？我們先了解連結串列的特性，這個特性我們放在c++前提下來說，因為這個特性是根據記憶體特性來闡述的，Javascript 不存在記憶體操作，所有資料型別，本質性繼承Object 物件，而Ob

進擊的JavaScript小白（一）

經常有外行的朋友問我JavaScript和Java是不是一家的 JavaScript和Java的關係就像是雷鋒和雷峰塔的關係，除了名字有點像，其他的沒有任何關係，不要再問了，謝謝好了，抖完機靈，開始說正事了。一、JavaScript的簡介 JavaScript一種解釋型（解釋型

關於wxpy的小實驗（一）：實現登入微信、訊息接收、處理、回覆和人臉檢測處理反饋

概述：本文主要是博主想分享一下最近在學習python和opencv時做的一些小實驗和作為自己程式設計之路剛開始的一個小筆記。在剛接觸python時發現了有一個叫wxpy的東西，他可以實現讓微信自動接收、

微信小程式（一）：微信小程式與伺服器的簡單鏈接

生活無趣且不易，一起找點樂子吧。歡迎評論，和文章無關的東西也沒關係。最近在寫小程式，有些問題，搜尋不到太有價值的東西（可能是我對關鍵字的理解不好），這裡總結下我遇到各種問題，可能看來會比較可笑，但對新手來說也許會有些幫助，我會盡量去注重具體的實現。這篇文章來

Python初學者好玩案例（一）：最短的抓取網頁圖片程式碼，只有10行

這幾天閒來無事，又研究了一下Python的基礎內容，首先研究的是如何抓取網頁資料。發現大神們通常在初級教程裡就要寫很多程式碼，真讓我們這些初學者無所適從。加上Python的各種版本不同，也會讓初學者頭腦，在此提醒初學者，看資料一定要注意軟體版本號。還是按照我的原則，凡

整理js開發中的實用小工具（一）：做一個整合儲存的小工具

在開發工作中，常遇到程式碼重複開發的問題，比如一個分頁，左滑動等常見功能，而我們的解決辦法可能是這次寫一點，下次 copy 一點，如果不能解決問題，再改寫一點。若是沒有把可複用的程式碼抽離出來，做成一個通用的、可配置的小工具，私以為對技能的提升無益，所以在此立下個 flag，以後工作中遇到頻繁開發的功能

Javascript小知識點（五）：移動端控制點選別的地方，隱藏頁面彈框

在PC端實現思路是這樣的為document新增點選事件判斷點選的引數 event.target中是否包含該彈框相關的div 如果包含，則不作任何操作如果不包含，則直接設定該div隱藏程式碼如

微信小程式（七）：仿找事吧APP附近三公里Demo

功能點：輪播；列表，下拉重新整理上拉載入更多；地圖；網路請求；資料繫結等文字仿照了找事吧app 附近三公里功能，並感謝找事吧資料的提供。考慮到資料的私密性，本文貼出的程式碼並沒有貼出請求URL，敬請諒解。本文基於微信小程式公測版，IDE：

Retrofit2+RxJava學習小計（一）：單檔案、多檔案上傳之填平的坑

從Eclipse轉戰AndroidStudio已經有兩個月了。先誇誇Google親兒子的強大吧，各種方便就不一一道來了。主要是現在的Android陣營已經不想前兩年了。各種開源框架開源庫。也正是如此，AndroidStudio匯入開源的專案非常方便。自從Goog

凸優化筆記（一）：仿射集，凸集與錐

一.直線和線段設為空間中的兩個點。直線：線段：二.仿射集（Affine Set）凸集（Convex Set）和錐（Cones）仿射集仿射集：通過集合中

關於系統架構，專案設計案例（一）：抽獎系統概率設計

上面一篇文章說的只是一些想法，我想很多人看到了比較空洞，從這篇文章開始我會把我設計過的一些專案拿出來把我的設計的相關思路給大家作為一些參考。其實抽獎系統的設計，我在前面的文章有說明，今天又來回顧一下吧。首先我們看需求：我們

微信小程式（一）：微信小程式申請註冊與開發流程

本文主要用於介紹微信小程式開發過程中的注意點，查閱過程請結合微信的開發者文件一同觀看。本文基於微信小程式公測版，IDE：微信開發者工具 0.10.102800 本文件用於幫助公司內部初學者，如有感覺拖沓請見諒 AppID申請 A

JAVA 學習（一）：16進位制字串自增的實現

JAVA學習系列，並不是從基礎去講java的知識，而是把我在學習或是工作中，一些思想、邏輯總結出來。原先在工作中，因為測試的需要，經常要往資料庫中批量的插資料。而表的主鍵用的是UUID，是由16進位制字元加“-”組成的，還有裝置的mac地址是由16進位制字元加“:”組成的，那個時候，我剛學ja

複習之JavaScript基本語法（一）——三種引入方式及load、write事件

JavaScript是什麼 JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言。 JavaScript的作用 JavaScript

API 限流器（一）：基於redis的API訪問頻率控制器的實現

在open API日益盛行的今天，API的訪問頻率控制尤為重要。Google開源的Guava中有個類叫RateLimiter,但是此類控制粒度只是秒級別的，沒有提供分鐘，小時，天級別的限制，而且採取的是阻塞的模式，應用起來不是很方便。本人依據Redis的有序集合開發了一個訪

Elasticsearch搜尋詳解（一）：基於 url 的搜尋

簡單的查詢假如有個 customer 的索引（index），最簡單的查詢是 GET /customer/_search?q=iphone 上面的例子將搜尋 customer 索引，返回所有欄位中包含 iPhone 的文件這個查詢只有一個引數 q，也就是查詢關鍵字。

小程序初體驗：手把手教你寫出第一個小程序（一）

輸入框個人創建公測快速 nsh 成功 too 調用本文筆者將根據quick start中的範例代碼，帶大家簡單地剖析一下小程序的運行方式，並介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。適用對象：前端初學者，對小程序開發感興趣者 tip

Javascript小案例（一）：仿淘寶搜尋框使用者輸入事件的實現

相關推薦