时间戳

首页 > 解决方案 > 关于android中的html选择元素模糊事件

javascript - 关于android中的html选择元素模糊事件

问题描述

在很多安卓设备中，下拉菜单会使用系统的默认样式。当我单击下拉框时，这些选项将以不同的方式显示。但是当我单击一个选项使其消失时，它不会触发模糊或聚焦事件。当我再次单击文档时，将触发 blur 或 focusout 事件。那么如何让这些选项在它们消失时触发模糊事件呢？

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      margin-bottom: 30px;
      color: rgb(73, 73, 255);
    }

    body {
      margin: 50px auto;
    }
    div {
        margin-top: 100px;
        text-align: center;
    }
    select {
      width: 200px;
      height: 40px;
      user-select: none;
    }
    select:focus {
      outline: none !important;
    }
    .echo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      margi-top: 30px;
      color: red;
    }

  </style>
</head>

<body>
  <div class="fse">
    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
  </div>
  <div class="echo"></div>
</body>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
  $(function () {
    $('select').on('focusout focusin change blur', function (e) {
      $('.echo').text(e.type)
    })
  });
</script>

</html>

标签： javascriptandroidhtmldropdownblur

解决方案

推荐阅读