javascript Realizes the Query Effect of JD.COM Express Order Number

2021-09-24 21:26:37
OfStack

Case: Simulate the query effect of Jingdong Express number for your reference. The specific contents are as follows

Requirement: When we enter the content in the text box, the content with large font size will be automatically displayed on the text box

Analysis:

When you enter the content, the large box above will automatically display (the font size here is larger) The form detects user input and adds keyboard events to the form At the same time, the value (value) in the express delivery order number is obtained and copied to the big box as the content If the contents of the courier number are empty, hide the big box When the focus is lost, the big box is hidden

Note: keydown and keypress in the text box characteristics: They two events triggered, text has not fallen into the text box, keyup event triggered, the text has fallen into the text box


<style>
  * {
  padding: 0;
  margin: 0;
  }
  .search {
  position: relative;
  width: 178px;
  margin: 100px;
  }
  .con {
  display: none;
  position: absolute;
  top: -48px;
  width: 171px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  }
  .con::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 28px;
  left: 18px;
  border: 8px solid #000;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  }
 </style>
 </head>
 <body>
 <div class="search">
  <div class="con"></div>
  <input type="text" placeholder=" Please enter your courier number " class="jd" />
 </div>
 <script>
  var con = document.querySelector(".con");
  var jd_input = document.querySelector(".jd");
  jd_input.addEventListener("keyup", function () {
  if (this.value == "") {
   con.style.display = "none";
  } else {
   con.style.display = "block";
   con.innerHTML = this.value;
  }
  });
  // When you lose focus, hide the box 
  jd_input.addEventListener("blur", function () {
  con.style.display = "none";
  });
  // When the focus is obtained, the box is displayed 
  jd_input.addEventListener("focus", function () {
  if (this.value !== "") {
   con.style.display = "block";
  }
  });
 </script>
</body>