在EmberJS的textarea中输入时,请勿键入换行符

时间:2013-12-30 09:04:31

标签: javascript jquery ember.js

我需要在按下 Enter 键时提交更改,而不是键入换行符号。我正在使用Ember.js和稍微定制的TextArea助手。

以下是我在模板中的内容

{{edit-item placeholder="Weight" value=weight insert-newline="acceptChanges" focus-out="acceptChanges"}}

在我的帮手

App.EditItemView = Em.TextArea.extend

  didInsertElement: ->
    this.$().focus()
    this.$().blur()

  focusIn: ->
    $this = this.$()
    $this.get(0).select()
    # fix webkit select problems
    mouseUpHandler = ->
        $this.off("mouseup", mouseUpHandler)
        return false
    $this.mouseup(mouseUpHandler)

  attributeBindings: ['style', 'placeholder']

Em.Handlebars.helper 'edit-item', App.EditItemView

和我的acceptChagnges行动

# In controller action hook up 
acceptChanges: ->
  $(document.activeElement).blur()
  @get('model').save()

真正的问题是,当选择文本和用户类型输入要接受的键时,它还会键入换行符替换textarea中的所有内容,因此唯一的换行符将被接受。

如何防止输入新行,但是触发事件以接受更改?

1 个答案:

答案 0 :(得分:5)

我最近也必须这样做,事实证明它相当简单。这是一个非常简单的组件:

App.NoteBoxComponent = Ember.TextArea.extend({

    keyDown: function (event) {
        if (event.which === 13 && ! event.shiftKey) {
            // Don't insert newlines when submitting with enter
            event.preventDefault();
        }
    },

    // This next bit lets you add newlines with shift+enter without submitting
    insertNewline: function (event) {
        if (! event.shiftKey) {
            // Do not trigger the "submit on enter" action if the user presses
            // SHIFT+ENTER, because that should just insert a new line
            this._super(event);
        }
    }

});

要使用此功能,只需在某处将{{note-box action='foo'}}添加到您的把手即可。动作' foo'将在用户点击进入时触发。