百度搜索数据.html

最新推荐文章于 2024-05-19 11:27:40 发布

kirito程序员版

最新推荐文章于 2024-05-19 11:27:40 发布

阅读量155

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_63741127/article/details/134588689

版权

onblur 事件:

当用户离开input输入框时执行一段Javascript代码

HTML 中:

<element οnblur="SomeJavaScriptCode">

JavaScript 中:

object.οnblur=function(){SomeJavaScriptCode};

onkeyup 事件:

当用户释放键盘按钮时执行Javascript代码

HTML 中:

<element οnkeyup="SomeJavaScriptCode">

JavaScript 中:

object.οnkeyup=function(){SomeJavaScriptCode};

CSS属性

display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

CSS display 属性 | 菜鸟教程

结合使用实现

当用户释放键盘按钮时，显示id='show‘的区域，将display由none更改为block

input.onkeyup = function () {

show.style.display = 'block';

}

当用户离开input输入框时执，将display更改为none，并将输入框内容清空。

input.onblur = function () {

show.style.display = 'none';

input.value = '';

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度搜索数据</title>
  <style type="text/css">
    .show {
      width: 202px;
      height: 300px;
      color: #000;
      border: 1px solid #ddd;
      display: none;
      padding: 3px;
    }
  </style>
</head>

<body>
  <div class="box">
    <input type="text" id="input-txt" placeholder="请输入搜索数据">
    <button type="submit" id="search">搜索</button>
    <div class="show" id="show">
      <p>哈哈</p>
    </div>
  </div>
  <script>
    'use strict'
    let arr = ['中国居民存款破纪录', '致敬！灾难中的中国逆行者', '社保缴费满15年就可以不缴了吗？', '科学家研发出男性避孕药', '高启强为什么解领带擦玻璃', '吴刚说最想演的角色是高启强', '我是大帅哥'];
    //展示区域的显示和隐藏
    let input = document.getElementById('input-txt');
    let show = document.getElementById('show');
    //用户停止键盘输入时执行的代码
    input.onkeyup = function () {
      show.style.display = 'block';
      //匹配数据
      let str = '';
      arr.forEach((item) => {
        //匹配有指定数据的字符串
        let res = item.indexOf(input.value);
        if (res != -1) {
          str += '<p>' + item + '</p>';
        }
      })
      console.log(str);
      if (!input.value || !str) {
        show.innerHTML = '<p>暂无结果！</p>';
      }
      else {
        show.innerHTML = str;//将代码块嵌入到html中显示
      }
    }
    //离开输入框时执行的代码
    input.onblur = function () {
      show.style.display = 'none';
      input.value = '';
    }
  </script>
</body>

</html>

源代码出处20个JavaScript开发案列（一）_javascript案例大全_终成大师的博客-CSDN博客

kirito程序员版

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
百度搜索数据.html

display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。当用户释放键盘按钮时，显示id='show‘的区域，将display由none更改为block。当用户离开input输入框时执，将display更改为none，并将输入框内容清空。当用户离开input输入框时执行一段Javascript代码。当用户释放键盘按钮时执行Javascript代码。
复制链接

扫一扫