<template>
<view>
<text>上面为原生导航栏</text>
<view><text>官网封装好的uni-search-bar</text></view>
<uni-search-bar></uni-search-bar>
<text>原生input</text>
<input type="text" value="" class="test"/>
</view>
</template>
<script>
// 当前页面实例
let currentWebview = null
export default {
onLoad(option) { // 通过option接收其他页面传递的参数
// #ifdef APP-PLUS
currentWebview = this.$scope.$getAppWebview();
// #endif
// 如果有参数,不自动获取焦点;没有参数,自动获取焦点
if(option.params) {
// 解析参数,传递给属性
// console.log('option', JSON.parse(option.params))
this.params = JSON.parse(option.params)
//开始搜索
this.doSearch()
}else {
// 获取焦点
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(true)
// #endif
}
},
data() {
return {
params: null, // 其他页面带的参数
content: null, // 搜索内容
}
},
// 取消按钮,点击事件
onNavigationBarButtonTap(e) {
//后退(不需要判断index,因为只有按钮,如果有多个按钮再进行判断)
this.navBack()
},
// 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputChanged(e) {
// console.log('搜索框输入的内容', e.text)
this.content = e.text
},
// 用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputConfirmed(e) {
// console.log('点击了搜索按钮', e.text)
// 失去焦点,收起键盘
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(false)
// #endif
this.doSearch()
},
methods: {
// 搜索动作
doSearch() {
uni.showLoading()
}
}
}
</script>
<style>
.test{
border: 2rpx solid #000080;
}
</style>
- 发布:2021-02-12 14:10
- 更新:2021-02-20 18:26
- 阅读:597
【报Bug】setTitleNViewSearchInputFocus(true) 和官网uni-search-bar以及input 手动点击input 键盘出现0.5s再次消失
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10
HBuilderX类型: 正式
HBuilderX版本号: 3.1.2
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: mate30 4G
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
<template>
<view>
<text>上面为原生导航栏</text>
<view><text>官网封装好的uni-search-bar</text></view>
<uni-search-bar></uni-search-bar>
<text>原生input</text>
<input type="text" value="" class="test"/>
</view>
</template>
<script>
// 当前页面实例
let currentWebview = null
export default {
onLoad(option) { // 通过option接收其他页面传递的参数
// #ifdef APP-PLUS
currentWebview = this.$scope.$getAppWebview();
// #endif
// 如果有参数,不自动获取焦点;没有参数,自动获取焦点
if(option.params) {
// 解析参数,传递给属性
// console.log('option', JSON.parse(option.params))
this.params = JSON.parse(option.params)
//开始搜索
this.doSearch()
}else {
// 获取焦点
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(true)
// #endif
}
},
data() {
return {
params: null, // 其他页面带的参数
content: null, // 搜索内容
}
},
// 取消按钮,点击事件
onNavigationBarButtonTap(e) {
//后退(不需要判断index,因为只有按钮,如果有多个按钮再进行判断)
this.navBack()
},
// 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputChanged(e) {
// console.log('搜索框输入的内容', e.text)
this.content = e.text
},
// 用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputConfirmed(e) {
// console.log('点击了搜索按钮', e.text)
// 失去焦点,收起键盘
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(false)
// #endif
this.doSearch()
},
methods: {
// 搜索动作
doSearch() {
uni.showLoading()
}
}
}
</script>
<style>
.test{
border: 2rpx solid #000080;
}
</style>
<template>
<view>
<text>上面为原生导航栏</text>
<view><text>官网封装好的uni-search-bar</text></view>
<uni-search-bar></uni-search-bar>
<text>原生input</text>
<input type="text" value="" class="test"/>
</view>
</template>
<script>
// 当前页面实例
let currentWebview = null
export default {
onLoad(option) { // 通过option接收其他页面传递的参数
// #ifdef APP-PLUS
currentWebview = this.$scope.$getAppWebview();
// #endif
// 如果有参数,不自动获取焦点;没有参数,自动获取焦点
if(option.params) {
// 解析参数,传递给属性
// console.log('option', JSON.parse(option.params))
this.params = JSON.parse(option.params)
//开始搜索
this.doSearch()
}else {
// 获取焦点
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(true)
// #endif
}
},
data() {
return {
params: null, // 其他页面带的参数
content: null, // 搜索内容
}
},
// 取消按钮,点击事件
onNavigationBarButtonTap(e) {
//后退(不需要判断index,因为只有按钮,如果有多个按钮再进行判断)
this.navBack()
},
// 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputChanged(e) {
// console.log('搜索框输入的内容', e.text)
this.content = e.text
},
// 用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputConfirmed(e) {
// console.log('点击了搜索按钮', e.text)
// 失去焦点,收起键盘
// #ifdef APP-PLUS
currentWebview.setTitleNViewSearchInputFocus(false)
// #endif
this.doSearch()
},
methods: {
// 搜索动作
doSearch() {
uni.showLoading()
}
}
}
</script>
<style>
.test{
border: 2rpx solid #000080;
}
</style>
预期结果:
点击获取焦点后 软键盘一直存在 并且等待输入完成
点击获取焦点后 软键盘一直存在 并且等待输入完成
实际结果:
自动获取焦点 或者是手动点击获取焦点 软键盘 弹出0.5s后自动消失 此时 文字并未输入完毕 但是软键盘依然消失
原生导航栏setTitleNViewSearchInputFocus(true) 和官网封装好的uni-search-bar 以及基础的input 都有一样的问题
自动获取焦点 或者是手动点击获取焦点 软键盘 弹出0.5s后自动消失 此时 文字并未输入完毕 但是软键盘依然消失
原生导航栏setTitleNViewSearchInputFocus(true) 和官网封装好的uni-search-bar 以及基础的input 都有一样的问题
bug描述:
【报Bug】原生导航栏setTitleNViewSearchInputFocus(true) 和官网封装好的uni-search-bar 以及input 获取焦点后 未出现键盘 手动点击input 后 键盘出现0.5s再次消失
!
1 个回复
DCloud_UNI_LXH
经测试,input和uni-search-bar使用自动聚焦和手动聚焦未复现此问题。
使用示例代码测试TitleNViewSearchInput自动聚焦,进入页面聚焦后焦点随后消失,但是键盘未收起