【快应用】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
标签:flex,console,text,focus,输入框,弹出,input,div,margin 来源: https://www.cnblogs.com/developer-huawei/p/16593780.html