uni-app中u-search和input输入框输入结束回车后重新获取光标问题
uni-app中u-search和input输入框输入结束回车后重新获取光标问题
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本 | windows10专业版 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.98 |
| 手机系统 | Android |
| 手机系统版本 | Android 7.1.1 |
| 手机厂商 | 商米 |
| 手机机型 | sunmiL2 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
示例代码：
<view class="u-demo-block">
<text class="u-demo-blocktitle">资料查询</text>
<view class="u-demo-blockcontent">
<view class="u-page__tag-item">
<u-search ref="mySearch" :focus="focus" autofocus="autofocus" placeholder="输入条码/货号"
v-model="keyword"
cursorSpacing="10"
uni.hideKeyboard()
@search="getinfo()" ></u-search>
</view>
</view>
</view>操作步骤：
1
预期结果：
1
实际结果：
1
bug描述：
要实现的功能是，在输入框输入条码数字回车确认触发请求查询事件请求得到数据，完成后光标重新定位在输入框可以直接再次用扫描头扫描输入，在H5端功能实现正常，但是编译成APP，输入条码进行查询后光标可以返回在输入框闪，但是无法输入，只能在输入框再点一下才能再实现输入
2 回复
重新聚焦时，这样写试试
this.$nextTick(()=>{
this.focus = true
})
<template>
<input :focus=“focus” v-model=“inputValue” @blur=“blurFun” />
<button @click=“moveCursorToEnd”>光标</button>
</template> <script> export default { data() { return { focus:false, inputValue:'' }; }, methods: { blurFun(){ this.focus = false }, moveCursorToEnd() { this.$nextTick(()=>{ this.focus = true }) } } }; </script>
在 Uni-App 中使用 u-search 或 input 输入框时，如果希望在用户按下回车键后重新获取输入框的光标，可以通过以下步骤实现：
1. 监听回车事件
首先，需要监听输入框的回车事件。可以通过 @confirm 事件来实现。
2. 重新获取光标
在回车事件的回调函数中，使用 this.$refs 获取输入框的引用，并调用 focus() 方法来重新获取光标。
示例代码
<template>
<view>
<!-- 使用 u-search 组件 -->
<u-search
v-model="searchValue"
@confirm="handleSearchConfirm"
ref="searchInput"
></u-search>
<!-- 或者使用原生 input 组件 -->
<input
type="text"
v-model="inputValue"
@confirm="handleInputConfirm"
ref="inputField"
/>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: '',
inputValue: ''
};
},
methods: {
handleSearchConfirm() {
// 处理搜索确认逻辑
console.log('搜索内容:', this.searchValue);
// 重新获取光标
this.$refs.searchInput.focus();
},
handleInputConfirm() {
// 处理输入确认逻辑
console.log('输入内容:', this.inputValue);
// 重新获取光标
this.$refs.inputField.focus();
}
}
};
</script>
<style>
/* 样式可以根据需要自定义 */
</style>