uniapp 怎么实现点击发送按钮textatea不失去焦点 详细代码

可以在点击发送按钮时，给 textarea 的 blur （失去焦点）事件绑定一个阻止冒泡（stopPropagation）的函数，使其不会执行失去焦点的操作。具体代码如下：

<template>
  <view>
    <textarea
      ref="textarea"
      @blur.stop="onTextareaBlur"
    />
    <button @tap="onSendTap">发送</button>
  </view>
</template>

<script>
export default {
  methods: {
    onSendTap() {
      // 发送消息逻辑
      // ...

      // 阻止 textarea 失去焦点
      this.$refs.textarea.$el.blur = function() {};
    },

    onTextareaBlur() {
      // 失去焦点逻辑
      // ...
    },
  },
};
</script>

在点击发送按钮时，我们先执行发送消息逻辑，然后阻止 textarea 失去焦点，最后文字的焦点仍停留在 textarea 中。同时，我们需要注意，这样做可能会带来一些意想不到的问题，比如用户体验上感觉不到已经发送成功等，所以需要在实际应用中谨慎使用。

相关问题

uniapp 怎么实现点击发送按钮textatea不失去焦点 具体实现代码

可以使用自定义组件实现，在自定义组件中实现textarea的聚焦和失焦事件，从而避免在点击发送按钮之后自动失去焦点。以下是一个简单的自定义组件示例：

1. 在pages下创建一个custom-textarea文件夹，在该文件夹下创建textarea.vue组件。代码如下：

<template>
  <textarea
    ref="textarea"
    :value="textareaValue"
    @input="textareaInput"
    @blur="textareaBlur"
    @focus="textareaFocus"
    :placeholder="placeholder"
    :rows="rows"
    :disabled="disabled"
    :maxlength="maxlength"
    :autofocus="autofocus"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></textarea>
</template>

<script>
export default {
  name: 'custom-textarea',
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    rows: {
      type: Number,
      default: 3,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: [Number, String],
      default: 140,
    },
    width: {
      type: [Number, String],
      default: '100%',
    },
    height: {
      type: [Number, String],
      default: 80,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      textareaValue: '',
    }
  },
  mounted() {
    this.textareaValue = this.value
    if (this.autofocus) {
      this.focus()
    }
  },
  methods: {
    textareaInput(e) {
      this.textareaValue = e.target.value
      this.$emit('input', e.target.value)
    },
    textareaFocus() {
      this.$emit('focus')
    },
    textareaBlur() {
      this.$emit('blur', this.textareaValue)
    },
    focus() {
      this.$refs.textarea.focus()
    },
    blur() {
      this.$refs.textarea.blur()
    },
  },
}
</script>

<style scoped>
textarea {
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  line-height: 28px;
}
</style>

2. 在需要使用该组件的页面中引入该组件，并在发送按钮的点击事件中使用`$refs`调用该组件的`blur`方法，从而避免失去焦点。例如：

<template>
  <view class="container">
    <custom-textarea
      v-model="textareaValue"
      :placeholder="placeholder"
      :rows="3"
      :width="300"
      :maxlength="140"
      :autofocus="true"
    ></custom-textarea>
    <button class="send-btn" @click="handleSend">发送</button>
  </view>
</template>

<script>
import CustomTextarea from '@/components/custom-textarea'

export default {
  components: {
    CustomTextarea,
  },
  data() {
    return {
      textareaValue: '',
      placeholder: '请输入内容',
    }
  },
  methods: {
    handleSend() {
      // 发送按钮点击事件
      this.$refs.textarea.blur() // 调用自定义组件的blur方法，避免失去焦点
      // 其他处理逻辑
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.send-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #409eff;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>

uniapp 阻止textatea失去焦点 具体实现代码

可以通过监听页面的失去焦点事件来阻止textarea失去焦点，具体实现代码如下：

1. 在页面的onLoad方法中添加事件监听器：

onLoad() {
  uni.$on('unihidekeyboard', this.onHideKeyboard)
},

2. 实现失去焦点事件监听器：

onHideKeyboard() {
  setTimeout(() => {
    const activeElement = document.activeElement
    if (activeElement && activeElement.tagName === 'TEXTAREA') {
      activeElement.focus()
    }
  }, 300)
},

3. 在页面销毁时，移除事件监听器：

onUnload() {
  uni.$off('unihidekeyboard', this.onHideKeyboard)
},

这样就可以在页面中阻止textarea失去焦点了。