Как поймать возврат на входном элементе с помощью Aurelia?

Question

В angularjs у меня было следующее:

app.directive('ngEnter', function() { 
    return function (scope, element, attrs) { 
    element.bind("keydown keypress", function (event) { 
     if(event.which === 13) { 
      scope.$apply(function(){ 
       scope.$eval(attrs.ngEnter); 
      }); 

      event.preventDefault(); 
     } 
    }); 
    }; 
}); 

И HTML был:

<input type="text" ng-model="searchText" class="form-control" 
           placeholder="Search" 
           ng-enter="search($event, searchText)"> 

Так в основном, как только я закончил печатать свой текст для поиска, когда я нажал кнопку ввода функции поиска на моем контроллере будет работать.

Как бы это сделать в Аурелии?

Я все еще узнаю о его возможностях, поэтому любая помощь будет оценена по достоинству.

Answer 1

Простейшим способом было бы обернуть input в элементе form и связать с событием submit формы.

<form role="form" submit.delegate="search()"> 
    <div class="form-group"> 
    <label for="searchText">Search:</label> 
    <input type="text" value.bind="searchText" 
      class="form-control" id="searchText" 
      placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

Это даст вам то же поведение, которое вы построили выше. Я все еще работаю над созданием примера пользовательского атрибута для этого, но, честно говоря, так я бы порекомендовал вам сделать эту конкретную вещь (захват, когда пользователь нажимает кнопку ввода).

Answer 2

Это, похоже, не поддерживается из коробки. Пока не идеально, вот что я намерен сделать:

• Добавить скрытую кнопку Отправить в верхней части моей формы с атрибутом click.delegate.
• Запустите некоторый код в моей VM, когда его щелкнули. Этот код решит, что делать с нажатием клавиши ввода на основе любой настраиваемой логики, в которой я нуждаюсь.

Надежда, что помогает, Эндрю

EDIT:

Вы также можете добавить нажатие клавиши делегат события:

<input keypress.delegate="doSomething($event)" /> 

и определить DoSomething() как:

doSomething(event) { 
    if(event.which == 13) { 
    alert('Your code goes here!'); 
    } 
    event.preventDefault(); 
} 

Это будет немного чище, когда у вас много входов с различными типами нажатия клавиш.

Answer 3

Я думаю, альтернатива углового ngEnter будет:

import {customAttribute, inject} from 'aurelia-framework'; 
 

 
@customAttribute('enter-press') 
 
@inject(Element) 
 
export class EnterPress { 
 
    element: Element; 
 
    value: Function; 
 
    enterPressed: (e: KeyboardEvent) => void; 
 

 
    constructor(element) { 
 
     this.element = element; 
 

 
     this.enterPressed = e => { 
 
      let key = e.which || e.keyCode; 
 
      if (key === 13) { 
 
       this.value();//'this' won't be changed so you have access to you VM properties in 'called' method 
 
      } 
 
     }; 
 
    } 
 

 
    attached() { 
 
     this.element.addEventListener('keypress', this.enterPressed); 
 
    } 
 

 
    detached() { 
 
     this.element.removeEventListener('keypress', this.enterPressed); 
 
    } 
 
}

<input type="password" enter-press.call="signIn()"/>

Answer 4

Из keypress.delegate и keypress.trigger в качестве <input> блока ввода текста по умолчанию, ваша функция должна возвращать верно, чтобы избежать его , например:

doSomething(event) { 
    if(event.which == 13) { 
     console.log('Your code goes here!'); 
     event.preventDefault(); 
     return false; 
    } 
    return true; 
}