javascript - vue onchange监听input，中文输入法输入拼音回车失效

问题描述

问 题

如题，在用组件实现一个浏览器搜索的demo：

html：
<template>
<div>

<logo-select @logoNow="changeSource"></logo-select>
<div class="inputSelect">
  <input type="text" v-model="msgInput" @change="get($event)" @keyup="get($event)" @keydown="move($event)">
  <span class="markDelete" @click="clearInput">x</span>
  <button @click="search">搜一下</button>
</div>
<div class="inputToggle">
  <!--多个元素/组件的过渡效果用transition-group，每个 <transition-group> 的子节点必须有 独立的key ，动画才能正常工作-->
  <transition-group tag="ul" name="fade" class="ulResult" mode="out-in" v-cloak>
    <li v-for="(item, index) in results" class="liStyle" :class="{selectback:index==now}"
        @mouseover="changeBack(index)" @click="msgChange(index)" :key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

</div>
</template>

js：

<script type="text/javascript">
import logoSelect from './logo-new.vue';

export default {

components: {
  'logo-select': logoSelect
},
data: function () {
  return {
    msgInput: '',
    results:[],
    now: -1,
    logoIndex: 0,
    logoData: [
      {
        name: '360搜索',
        url: 'https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q='
      },
      {
        name: '百度搜索',
        url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd='
      },
      {
        name: '搜狗搜索',
        url: 'https://www.sogou.com/web?query='
      }
    ]
  }
},
methods: {
  clearInput: function () {
      this.msgInput = '',
      this.results = ''
  },
  get: function (ev) {
    if(ev.keyCode === 37 || ev.keyCode === 39) {
      return;
    }else if(ev.keyCode === 13) {
      window.open(this.logoData[this.logoIndex].url + this.msgInput);
    }else {
      //利用jsonp跨域
      this.$http.jsonp('https://sug.so.360.cn/suggest?word=' + this.msgInput + '&encodein=utf-8&encodeout=utf-8')
        .then(function(res) {
          this.results = res.data.s
        }
      )
    }
  },
  move: function (ev) {
    if(ev.keyCode === 38 && this.msgInput != '') {
      //阻止input原生上下方向键事件
      ev.preventDefault(),
      this.now -= 1
    }else if(ev.keyCode === 40 && this.msgInput != '') {
      ev.preventDefault(),
      this.now += 1
    }else {
        return;
    }
  },
  changeBack: function (index) {
    this.now = index
  },
  msgChange: function (index) {
    this.msgInput = this.results[index],
    window.open(this.logoData[this.logoIndex].url + this.msgInput)
  },
  search: function () {
    window.open(this.logoData[this.logoIndex].url + this.msgInput)
  },
  //监听的子组件函数不用写参数，但调用的函数需要加
  changeSource: function (index) {
    this.logoIndex = index
  }
}

}
</script>
logo部分的子组件因为不影响input功能就不贴出来了。

问题就是，当我输入英文字符数字等都没问题，但用中文输入法回车出拼音就无法正常工作？

输入拼音：

按空格出字可以正常显示：

按回车出拼音无提示：

这个demo构思从https://github.com/lavyun/vue...而来，貌似原代码也有这个bug，
自己想要实现像百度谷歌那样的完美搜索建议效果，不知道该如何解决？

---

问题更新：
用了陌上寒、ted94fe等朋友建议的watch方法可以成功解决这个bug，但会有个衍生问题：
就是想要在搜索结果里面用上下方向键选择联想内容更新到input同时又不更新上一次的搜索结果，然而用了watch以后因为无法获取到event参数从而get方法无法控制keyCode。

<template>
<div>

<logo-select @logoNow="changeSource"></logo-select>
<div class="inputSelect">
  <input type="text" v-model="msgInput" @keyup="get($event)" @keydown.up.prevent="selectUp()"
         @keydown.down="selectDown()" @keydown.enter="search()">
  <span class="markDelete" @click="clearInput">x</span>
  <button @click="search">搜一下</button>
</div>
<div class="inputToggle">
  <!--多个元素/组件的过渡效果用transition-group，每个 <transition-group> 的子节点必须有 独立的key ，动画才能正常工作-->
  <transition-group tag="ul" name="fade" class="ulResult" mode="out-in" v-cloak>
    <li v-for="(item, index) in results" class="liStyle" :class="{selectback:index==now}"
        @mouseover="changeBack(index)" @click="msgChange(index)" :key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

</div>
</template>

<script type="text/javascript">
import logoSelect from './logo-new.vue';

export default {

components: {
  'logo-select': logoSelect
},
data: function () {
  return {
    msgInput: '',
    results:[],
    now: -1,
    logoIndex: 0,
    logoData: [
      {
        name: '360搜索',
        url: 'https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q='
      },
      {
        name: '百度搜索',
        url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd='
      },
      {
        name: '搜狗搜索',
        url: 'https://www.sogou.com/web?query='
      }
    ]
  }
},
methods: {
  clearInput: function () {
      this.msgInput = '',
      this.results = ''
  },
  get: function (ev) {
    if(ev.keyCode === 38 || ev.keyCode === 40) {
      return;
    }
    //利用jsonp跨域
    this.$http.jsonp('https://sug.so.360.cn/suggest?word=' + this.msgInput
      + '&encodein=utf-8&encodeout=utf-8')
      .then(function(res) {
        this.results = res.data.s
      }
    )
  },
  selectDown: function () {
    this.now++;
    if(this.now == this.results.length) {
      this.now = 0;
    }
    this.msgInput = this.results[this.now];
  },
  selectUp: function () {
    this.now--;
    if(this.now == -1) {
      this.now = this.results.length - 1;
    }
    this.msgInput = this.results[this.now];
  },
  changeBack: function (index) {
    this.now = index
  },
  msgChange: function (index) {
    this.msgInput = this.results[index],
    window.open(this.logoData[this.logoIndex].url + this.msgInput)
  },
  search: function () {
    window.open(this.logoData[this.logoIndex].url + this.msgInput)
  },
  //监听的子组件函数不用写参数，但调用的函数需要加
  changeSource: function (index) {
    this.logoIndex = index
  }
},
watch: {
  msgInput: function(Val) {
    this.get(Val)
  }
}

}
</script>

有什么办法能够解决这个问题？还是说鱼与熊掌不可兼得？

解决方案

我也遇到过这个问题，后来用watch监听msgInput(输入的内容变化)来触发对应的方法，解决的这个问题

这篇关于javascript - vue onchange监听input，中文输入法输入拼音回车失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！