uni-app input输入框在单词联想时点击空白处,没有将输入的内容返回并且报错

dzjeubhm  于 2021-11-27  发布在  Java
关注(0)|答案(6)|浏览(1242)

@hbcui1984

问题描述

inout输入时,如果使用的是原生键盘,那么会关联拼写,但是当点击空白处或者监听@input时,会报一个错vm.onInput is not a function,此处onInput为@input自定义调用的方法

复现步骤

[复现问题的步骤]
前提条件:使用原生android键盘,环境为微信小程序

  1. 启动 '表单组件'
  2. 点击 'input输入任意英文',此时输入框内的英文是带下划线的,再点击空白处收起键盘,让input失去焦点,将触发onInput,这时会报vm.onInput is not a function
  3. 查看

[或者可以直接贴源代码]

预期结果

预期将原生键盘的input返回,原生微信小程序是支持的

实际结果

[这里请贴上你的报错截图或文字]

此时不点击红色框中的内容直接点击空白处收起键盘,让input失去焦点,那么input组件触发onInput的时候会报错

系统信息:

  • 发行平台: 微信小程序
  • 操作系统 Android 7.0
  • HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
  • uni-app版本 [如使用Vue-cli创建/运行项目,则提供npm run info的运行结果]
  • 设备信息 [如 iPhone8 Plus]

补充信息

[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
我认为应该是处于单词拼写过程中@input调用onInput的时候失败了
但是使用@change是可以成功的,应该是@input的写法问题在mp-weixin端,在这种情况下@emit('input')时丢失了this对象

vatpfxk5

vatpfxk52#

我也遇到了相同的问题了,请问怎么解决?

zy1mlcev

zy1mlcev3#

我也遇到了相同的问题了,请问怎么解决?

plupiseo

plupiseo4#

你们分别使用的什么输入法?

hgc7kmma

hgc7kmma5#

相同的问题,输入候选词直接点键盘上的回车符,也会报错。

iOS 没有复现该问题,安卓机上普遍复现。。。

正常输入时:输入完直接点击候选词,不报错,日志中打印的事件是在组件上触发的

回车输入时:输入完点击回车,报错,日志中打印的事件是在组件所在的页面上触发的

r6hnlfcb

r6hnlfcb6#

也遇到了这个问题,我这里在input上用v-model可以解决,demo:

自定义组件custom-input.vue,封装input

<template>
  <input
    type="text"
    v-model="text"
    @blur="onBlur"
  />
</template>
<script>
export default {
  props: ['value'],
  computed: {
    text: {
      get() { return this.value; },
      set(val) { this.$emit('input', val); }
    }
  },
  methods: {
    onBlur (e) {
      // 触发blur时手动同步值
      this.text = e.detail.value
    }
  }
}
</script>

父组件

<template>
    <custom-input v-model="inputText" />
</template>
<script>
    import customInput from './custom-input';

    export default {
        components: {customInput},
        data() { return { inputText: '初始值' }; }
    }
</script>

相关问题