uniapp input输入框直接点击发送按钮后隐藏怎么还显示一个空白是边框,点键盘确认按钮之后再点发送就正常,解决案例
时间: 2023-07-15 21:11:55 浏览: 169
这个问题可能是因为在点击发送按钮后,输入框失去了焦点但是键盘还没有完全隐藏导致的。可以尝试在点击发送按钮后手动让输入框失去焦点,如下所示:
```html
<template>
<view>
<input type="text" v-model="message" @keyup.enter="onEnter" />
<button @click="onSend">发送</button>
</view>
</template>
<script>
export default {
data() {
return {
message: '',
}
},
methods: {
onEnter() {
this.onSend()
},
onSend() {
// 使输入框失去焦点
this.$refs.input.blur()
// 发送消息
// ...
},
},
}
</script>
```
在 `onSend` 方法中,使用 `blur()` 方法手动让输入框失去焦点,这样输入框就不会再显示空白边框了。同时,还可以在输入框的 `@keyup.enter` 事件中调用 `onSend` 方法,实现按下 Enter 键和点击发送按钮的功能一致。
相关问题
uniapp input输入框直接点击发送按钮后隐藏怎么还显示一个空白是边框,点键盘确认之后再点发送就正常怎办
这个问题可能是由于键盘弹起时导致输入框被顶起,但是键盘隐藏时输入框没有重新布局,导致留下了一个空白的边框。为了解决这个问题,你可以尝试以下几个方法:
1. 使用 `@focus` 和 `@blur` 事件来监听输入框的焦点状态,当输入框失去焦点时重新布局输入框,例如:
```html
<template>
<div>
<textarea ref="input" v-model="message" @focus="onFocus" @blur="onBlur"></textarea>
<button @click="sendMessage">发送</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
originalHeight: 0 // 记录输入框的原始高度
}
},
methods: {
onFocus() {
this.originalHeight = this.$refs.input.clientHeight
},
onBlur() {
this.$refs.input.style.height = this.originalHeight + 'px'
},
sendMessage() {
// 发送消息
}
}
}
</script>
<style scoped>
textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
line-height: 1.5;
resize: none;
}
</style>
```
2. 使用 `uni.hideKeyboard()` 方法来隐藏键盘,并在隐藏键盘后重新布局输入框,例如:
```html
<template>
<div>
<textarea ref="input" v-model="message" @keydown.enter="onEnter"></textarea>
<button @click="sendMessage">发送</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
originalHeight: 0 // 记录输入框的原始高度
}
},
methods: {
onEnter() {
uni.hideKeyboard({
complete: () => {
this.$refs.input.style.height = this.originalHeight + 'px'
}
})
},
sendMessage() {
// 发送消息
}
}
}
</script>
<style scoped>
textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
line-height: 1.5;
resize: none;
}
</style>
```
以上两种方法都可以解决输入框隐藏后留下空白边框的问题,你可以根据自己的需求选择其中一种实现方式。
uniapp input输入框点键盘确认按钮之后再点发送按钮就正常,直接点击发送按钮后隐藏怎么还显示一个空白是边框
这个问题可能是由于键盘确认按钮触发了输入框的失焦事件,而直接点击发送按钮则没有触发失焦事件导致的。你可以尝试在发送按钮的点击事件中添加一个输入框失焦的操作,比如使用`blur()`方法来手动让输入框失焦,以解决这个问题。另外,如果发送按钮的点击事件会触发页面刷新或跳转,则需要在失焦之前把输入框的值保存下来,否则可能会出现输入框的值丢失的情况。
阅读全文