Implementation of javascript imitation Taobao search box input event-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Implementation of javascript imitation Taobao search box input event

Jun 28, 2017 am 11:38 AM

javascript

This article mainly introduces the implementation of JS imitation Taobao Search box user input event. Friends who need it can refer to it

Taobao is an online shopping platform we often use. Open On the Taobao homepage, find the search box on the Taobao homepage, as shown below:

Implementation of javascript imitation Taobao search box input event

As you can see, when the page is opened, you can see gray fonts in the search box "Girl's High Heels," and a blinking cursor. When the user clicks to enter, the gray text disappears. When the user clears all the contents of the text box, the gray text is automatically restored.

Next, this small case will introduce how to achieve this effect, that is, user input events.

The events that determine user input include oninput and onpropertychange. Of course, as you can probably imagine, due to browser compatibility issues, they appear in different situations. Normal browsers support oninput, while IE6, IE7, and IE8 support onpropertychange.

In order to save time, we will no longer imitate Taobao CSS styles.

Code and analysis:

<!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>

Copy after login

Effect:

Implementation of javascript imitation Taobao search box input event

The above is the JS imitation Taobao search box user introduced by the editor The implementation of input events, I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the Script House website!

The above is the detailed content of Implementation of javascript imitation Taobao search box input event. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn