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);
小結
在筆者看來，這兩個知識點有有用，可以應對大部分的開發需求了，在日常的開發中用的最多的也是這么兩個。比如當用戶按下搜索按鈕時，我們就獲取搜索框的內容，然后調用搜索接口，必要時還可以清除搜索框的內容並聚焦與搜索框。