1 引言
在我们使用HbuilderX开发APP时，经常会有一个很实用的功能需要开发，那就是搜索功能了，uni-app为我们提供该功能，大大的简化了开发难度，只要进行简单的配置就可以生成原生的导航输入框了（笔者的另一篇笔记中记录了配置过程，这里就不重复介绍了），那么现在有了原生输入框了，我们要如何操作输入框中的内容呢，原生输入框可不像input组件那样可以直接绑定数据的，下面笔者记录一下操作原生输入框的内容（比如输入框的聚焦失焦、输入内容的获取）
2 导航栏事件监听
2.1 页面生命周期：
https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
在uni-app页面周期有这么的三个函数：
onNavigationBarSearchInputChanged ：监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed ：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked ：监听原生标题栏搜索输入框点击事件
2.2 获取输入框内容
要获取输入框内容，可以在生命周期里通过参数e.text，使用如下所示。
<script>
export default {
data() {
return {}
},
methods: {
},
// 导航搜索栏监听搜索事件
onNavigationBarSearchInputConfirmed(e){
// 搜索框内容 : e.text
console.log(e.text);
}
}
</script>
2.3 输入框的失焦与聚焦
失焦与聚焦的形式要通过webview的方式来设置，首先我们先获取当前页面的webview对象，然后再调用setTitleNViewSearchInputFocus方法来设置。
聚焦
// 获取当前页面的webview对象
var webView = this.$mp.page.$getAppWebview();
// 搜索框聚焦
webView.setTitleNViewSearchInputFocus(true);
失焦
// 获取当前页面的webview对象
var webView = this.$mp.page.$getAppWebview();
// 搜索框失焦
webView.setTitleNViewSearchInputFocus(false);
小结
在笔者看来，这两个知识点有有用，可以应对大部分的开发需求了，在日常的开发中用的最多的也是这么两个。比如当用户按下搜索按钮时，我们就获取搜索框的内容，然后调用搜索接口，必要时还可以清除搜索框的内容并聚焦与搜索框。