标签：flex console text focus 输入框 弹出 input div margin

可以在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

标签：flex,console,text,focus,输入框,弹出,input,div,margin
来源： https://www.cnblogs.com/developer-huawei/p/16593780.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。