uni-app原生导航输入框操作

秒速五厘米 2023-06-18 12:00 1阅读 0赞

## 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][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页面周期有这么的三个函数：

> 1.  onNavigationBarSearchInputChanged    ：监听原生标题栏搜索输入框输入内容变化事件
> 2.  onNavigationBarSearchInputConfirmed  ：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
> 3.  onNavigationBarSearchInputClicked       ：监听原生标题栏搜索输入框点击事件

**2.2 获取输入框内容**

>  要获取输入框内容，可以在生命周期里通过参数e.text，使用如下所示。

**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);

## 小结 ##

在笔者看来，这两个知识点有有用，可以应对大部分的开发需求了，在日常的开发中用的最多的也是这么两个。比如当用户按下搜索按钮时，我们就获取搜索框的内容，然后调用搜索接口，必要时还可以清除搜索框的内容并聚焦与搜索框。

[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]: 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