uniapp 输入法画面_uni-app原生导航输入框操作

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，使用如下所示。

export default {

data() {

return {}

},

methods: {

},

// 导航搜索栏监听搜索事件

onNavigationBarSearchInputConfirmed(e){

// 搜索框内容 : e.text

console.log(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);

小结

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