【快应用】input组件的输入框弹出后，如何点击其他地方后失去焦点，并收起键盘

可以在input组件最外面的div上写一个收起键盘的事件。

 

代码如下（关注加粗的内容）：

 

<template>

  <div class="item-container">

    <div class="item-container">

      <input id="div" class="btn" value="select" placeholder="please enter password" onclick="ddd"></input>

    </div>

    <div style="width: 100%; height: 100%" onclick="falsefocus"></div>

  </div>

</template>

 

<style>

  .container {

    flex: 1;

    flex-direction: column;

  }

  .btn {

    height: 120px;

    text-align: center;

    border-radius: 5px;

    margin-right: 60px;

    margin-left: 60px;

    color: #e02828;

    line-height: 120px;

    font-size: 30px;

    border: 1px solid #000000;

  }

  .item-container {

    margin-top: 50px;

    flex-direction: column;

  }

</style>

 

<script>

  module.exports = {

    data: {

      componentData: {},

    },

    onInit() {

      this.$page.setTitleBar({

        text: 'menu',

        textColor: '#ffffff',

        backgroundColor: '#007DFF',

        backgroundOpacity: 0.5,

        menu: true

      });

    },

    falsefocus(e) {

      this.$element('div').focus({ focus: false })

      console.log("message111111");

    },

    ddd() {

      this.$element('div').focus({ focus: true })

      console.log("message222222");

    },

 

  }

</script>

 

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh