uni-app 报Bug 原生子窗体 nvue 页面中 input 设置 confirm-type=search 失效

uni-app 报Bug 原生子窗体 nvue 页面中 input 设置 confirm-type=search 失效

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.5.2

HBuilderX类型：正式

HBuilderX版本号：3.3.13

手机系统：iOS

手机系统版本号：iOS 13.1

手机厂商：苹果

手机机型：iphonex

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<input
ref="input"
class="nav_right_input"
placeholder-class="nav_placeholder"
placeholder="请输入关键词"
type="text"
confirm-type="search"
v-model="searchVal"
[@confirm](/user/confirm)="confirm"
/>

操作步骤：

就按照官方文档写一个原生子窗体，

预期结果：

没有横条，右下角显示搜索

实际结果：

有横条，右下角显示换行

bug描述：

原生子窗体，nvue 页面中input 设置confirm-type=search 失效，键盘右下角显示的是换行，不是发送；并且 按照文档软键盘上方没有横条，但是我这边虽然没有上一项下一项，但是有完成


更多关于uni-app 报Bug 原生子窗体 nvue 页面中 input 设置 confirm-type=search 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

用示例代码hello uni-app能出现你的问题吗？ 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 报Bug 原生子窗体 nvue 页面中 input 设置 confirm-type=search 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue下要使用 return-key-type=“search” 才会生效

真的，感谢

在 uni-app 中，nvue 页面是使用原生渲染的页面，与 vue 页面的渲染方式不同。在 nvue 页面中，input 组件的 confirm-type 属性设置为 search 时，可能会出现失效的情况。这可能是由于 nvue 页面的原生渲染机制与 vue 页面的差异导致的。

以下是一些可能的解决方案和排查步骤：

1. 确认 nvue 页面的正确使用

确保你在 nvue 页面中正确使用了 input 组件，并且 confirm-type 属性设置正确。例如：

<template>
  <view>
    <input confirm-type="search" @confirm="onSearch" />
  </view>
</template>

<script>
export default {
  methods: {
    onSearch(event) {
      console.log('Search confirmed:', event.detail.value);
    }
  }
}
</script>

2. 检查 nvue 页面的兼容性

nvue 页面的某些特性可能与 vue 页面不完全一致。你可以查阅 uni-app 官方文档，确认 confirm-type 属性在 nvue 页面中的支持情况。

3. 使用 vue 页面替代

如果 nvue 页面中的 confirm-type 确实无法正常工作，你可以考虑使用 vue 页面来实现相同的功能。vue 页面的 input 组件通常对 confirm-type 的支持更好。

4. 使用原生事件监听

如果 confirm-type 失效，你可以尝试通过监听 input 组件的 input 或 blur 事件来手动处理搜索逻辑。例如：

<template>
  <view>
    <input @input="onInput" @blur="onBlur" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.searchValue = event.detail.value;
    },
    onBlur() {
      this.onSearch();
    },
    onSearch() {
      console.log('Search confirmed:', this.searchValue);
    }
  }
}
</script>
回到顶部