Heim > Artikel > Web-Frontend > Kleiner Javascript-Fall: Nachahmung der Benutzereingabe im Taobao-Suchfeld

Kleiner Javascript-Fall: Nachahmung der Benutzereingabe im Taobao-Suchfeld

一个新手Original: 2017-09-06 10:01:381487Durchsuche

Taobao ist eine Online-Shopping-Plattform, die wir häufig nutzen. Öffnen Sie die Taobao-Homepage und finden Sie das Suchfeld auf der Taobao-Homepage, wie unten gezeigt:

Wie Sie sehen können, sehen Sie beim Öffnen der Seite die graue Schriftart „Girls' High Heels“ im Suchfeld sowie einen blinkenden Cursor. Wenn der Benutzer zur Eingabe klickt, verschwindet der graue Text. Wenn der Benutzer den gesamten Inhalt des Textfelds löscht, wird der graue Text automatisch wiederhergestellt.

Als nächstes wird in diesem kleinen Fall vorgestellt, wie dieser Effekt erzielt werden kann, nämlich Benutzereingabeereignisse.

Zu den Ereignissen, die die Benutzereingabe bestimmen, gehören oninput und onpropertychange. Wie Sie sich wahrscheinlich vorstellen können, treten sie aufgrund von Browserkompatibilitätsproblemen natürlich in unterschiedlichen Situationen auf. Normale Browser unterstützen oninput, während IE6, IE7 und IE8 onpropertychange unterstützen.

Um Zeit zu sparen, imitieren wir keine Taobao-CSS-Stile mehr.

Code und Analyse:

<!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><p class="search">
    <input type="text" id="txt">
    <label for="txt" id="message">仿淘宝搜索框</label>
    <!-- 注意label 中for属性 值指向 input 的id值 ，意思是把label标签和input表单相关联。
    label 元素不会向用户呈现任何特殊效果。当用户在label元素内点击文本， 浏览器就会自动将焦点转到和标签相关联的表单控件上。 --></p></body></html>

Wirkung:

Kleiner Javascript-Fall: Nachahmung der Benutzereingabe im Taobao-Suchfeld

Sie können keine tausend Meilen erreichen, ohne kleine Schritte zu unternehmen A Eine große Website besteht aus einer kleinen Funktion. Der Schwerpunkt liegt auf dem tatsächlichen Kampf und dem dreimaligen Eingeben des Codes, bis ich mit der Zeit vertraut bin und sicher ein großer Experte werde . Ermutigen Sie sich selbst und ermutigen Sie sich gegenseitig. Danke!

Das obige ist der detaillierte Inhalt vonKleiner Javascript-Fall: Nachahmung der Benutzereingabe im Taobao-Suchfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Python-Grundlagen-Tutorial-Dateioperationsmethode, um Volltext oder einzelne Zeilen zu ersetzenNächster Artikel：Python-Grundlagen-Tutorial-Dateioperationsmethode, um Volltext oder einzelne Zeilen zu ersetzen

In Verbindung stehende Artikel

Mehr sehen