emberjs 中的 preventDefault答案

【问题标题】：preventDefault in emberjsemberjs 中的 preventDefault
【发布时间】：2015-11-19 15:37:40
【问题描述】：

您好，我正在使用Ember place autocomple addon 我想修改插件的以下两种行为。 1. 我的地点自动完成文本框位于表单内。当我在填写自动完成文本框表单时按下回车键时。（即使我没有从谷歌建议中选择选项） 2. 如果没有选择任何地方并按下回车键，则应选择第一个选项。

虽然扩展插件会有所帮助。所以我尝试了下面的代码避免提交表单，但它没有工作。

import Ember from 'ember';
import PlacesAutocompleteField from 'ember-place-autocomplete/components/place-autocomplete-field';
export default PlacesAutocompleteField.extend({
  init(){
    this._super(...arguments);
  },
  keyUp: function(e){
    if(e.keyCode === 13){
      e.preventDefault();
    }
  },
  actions:{
    placeChanged(){
      this.toggleProperty('PLACE_CHANGED_FLAG');
    }
  }
});

我尝试的另一种方法只是看看它是否有效我添加了这个

  google.maps.event.addDomListener(this.$().children()[0],'keyUp',function(){
      console.log('keyup...');
      console.log(e);
    });

在插件内部。所以新代码是

  autocompleteCallback: Ember.on('didInsertElement', function() {
    this.getAutocomplete();
    this.get('autocomplete').addListener('place_changed', () => {
      this.placeChanged();
    });
    google.maps.event.addDomListener(this.$().children()[0],'keyUp',function(){
      console.log('keyup...');
      console.log(e);
    });
  }),

还是不行 Jsbin 输入“d”不要选择任何建议并按回车。

更新正如@GJK 建议的那样，使用 $(inputElement) 有效。如果用户没有选择任何内容，则在按 Enter 时选择建议的方向

$(inputElement).keydown((event) => {
    if (event.keyCode === 13) {
        let o = $('div.pac-container').children().first();

        event.preventDefault();
    }

【问题讨论】：

顺便说一句，您为什么不希望在用户按下回车时提交它？这不会破坏可访问性吗？
有什么不好的地方？
您正在扩展插件，但您实际上是在模板中使用扩展版本而不是原始版本吗？
@locks 更新问题。此文本框位于表单内。即使我输入了几个地方字母并且没有从建议中选择任何值，该表单也会被提交。因此，在单击输入时，我希望插件从建议的位置列表中选择第一个选项作为默认选项，而不是保存我输入的几个初始字母。
@GJK 我阅读了有关模板继承的问题，但没有找到可靠的答案。我假设我仍然可以使用上面的 jquery 方法获取输入框。替代方式对我不起作用

标签： ember.js

【解决方案1】：

原来你听错了事件。如this question 中所示，您必须覆盖keypress 事件而不是keyup 事件。

在您的 JSBin 中，我能够将以下代码放在您的 getAutocomplete 函数的末尾，它成功地阻止了表单被提交。

$(inputElement).keypress((event) => {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});

【讨论】：

嗨，GJK，这回答了我的问题。 “输入元素”