uniapp input点击旁边按钮,如何不失去焦点

有遇到在评论的时候,唤起键盘。旁边的其他按钮(匿名、发送等),input会失去焦点。软键盘会隐藏

处理方法:

1、重新获取键盘焦点 (通过重置focus状态来处理)

#页面 用focus变量来动态设置
<input v-model="inputValue" :focus="focus" class="input-text" @confirm="addComment" placeholder="发表一下你的看法..."/>

<view @click="checkedNm">
    <radio class="check" value="true" :checked="nmChecked" activeBackgroundColor="#FEA215"/>
    <text>匿名</text>
</view>


//  js 部分
    checkedNm(){
      this.nmChecked = !this.nmChecked;
      //这里要重置下 focus不然重新获取不会生效
      this.focus = false;
      setTimeout(() => {
        this.focus = true;
      },100)
    },

这种虽然能重新获取到焦点,但是软键盘会先隐藏在弹出...(目前还没有找到解决方案,如果有方法,可以帮忙告知下)

2、通过@touchend.stop.prevent阻止事件冒泡的形式来处理匿名点击事件

// 页面
<view @touchend.stop.prevent="checkedNm">
    <radio class="check" value="true" :checked="nmChecked"  activeBackgroundColor="#FEA215"/>
    <text>匿名</text>
</view>

//js部分
checkedNm(){
    this.nmChecked = !this.nmChecked;
    this.focus = true;
},

这种方式完美解决失去焦点问题,也没有触发软键盘隐藏弹起

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用自定义组件实现,在自定义组件中实现textarea的聚焦和失焦事件,从而避免在点击发送按钮之后自动失去焦点。以下是一个简单的自定义组件示例: 1. 在pages下创建一个custom-textarea文件夹,在该文件夹下创建textarea.vue组件。代码如下: ```html <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`方法,从而避免失去焦点。例如: ```html <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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值