uniapp input输入框点击发送按钮后隐藏怎么还显示一个空白是边框

你可以在发送按钮的点击事件中，手动调用输入框的 `blur()` 方法，来隐藏输入框并且让边框消失。

例如：

<template>
  <view>
    <input v-model="message" ref="input" />
    <button @click="sendMessage">发送</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      // 发送消息的逻辑

      // 隐藏输入框并让边框消失
      this.$refs.input.blur()
    }
  }
}
</script>

相关问题

uniapp input输入框直接点击发送按钮后隐藏怎么还显示一个空白是边框，点键盘确认按钮之后再点发送就正常怎办

这个问题可能是由于键盘输入法的问题导致的。你可以通过以下几种方式来尝试解决：

1. 在点击发送按钮后，通过JS代码手动隐藏键盘输入法：

// 获取输入框元素
let inputBox = document.getElementById('inputBox');
// 隐藏键盘输入法
inputBox.blur();

2. 在输入框元素上添加`enterkeyhint`属性，并将其值设为`send`：

<input type="text" enterkeyhint="send">

这样设置后，在点击键盘确认按钮后，输入框会自动将焦点转移给发送按钮，避免了出现空白边框的情况。

3. 如果以上两种方法都无法解决问题，你可以尝试通过CSS样式来隐藏输入框的边框：

input[type='text'] {
  border: none;
  outline: none;
}

这样设置后，输入框就不会显示边框了，但是需要注意的是，这样可能会对你的页面布局造成影响，需要根据具体情况进行调整。

uniapp input输入框直接点击发送按钮后隐藏怎么还显示一个空白是边框，点键盘确认之后再点发送就正常怎办

这个问题可能是由于键盘弹起时导致输入框被顶起，但是键盘隐藏时输入框没有重新布局，导致留下了一个空白的边框。为了解决这个问题，你可以尝试以下几个方法：

1. 使用 `@focus` 和 `@blur` 事件来监听输入框的焦点状态，当输入框失去焦点时重新布局输入框，例如：

<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()` 方法来隐藏键盘，并在隐藏键盘后重新布局输入框，例如：

<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>

以上两种方法都可以解决输入框隐藏后留下空白边框的问题，你可以根据自己的需求选择其中一种实现方式。