Question

所以，我有一个像这样的角度输入区域：

<div class="form-group row">
        <div class="col-md-10">
            <pre class="card card-block card-header">Search Publication by id: {{id}}</pre>
            <input type="text"
                   class="form-control"
                   ngui-auto-complete
                   [(ngModel)]="id"
                   [source]="publications"
                   value-formatter="id, title"
                   list-formatter="id, title"
                   />
            <button class="btn btn-primary" (keyup.enter)="search(id.id)" (click)="search(id.id)">Search Publication</button>
         </div>
    </div>

这个想法是为用户提供通过键盘或鼠标调用搜索功能的选项。

我发现的问题是调用是重复的，它为keyup.enter调用一次，再次调用

有没有简单的方法可以避免这种情况并不意味着定制指令？

Answer 1

在表单中 Enter 会导致按钮触发click事件，因此只需添加click处理程序

<div class="navbar">Navbar</div>
<div class="sidebar">
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>


  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <!-- Scrollable div -->
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    <p>TOP</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>BOTTOM</p>
  </div>


</div>
<div class="content">
  <p>TOP</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>BOTTOM</p>
</div>

Answer 2

您需要在按Enter后停止事件传播。将代码更改为使用(keydown.enter)而不是(keyup.enter)，并在方法后添加$event.preventDefault();。

<button class="btn btn-primary" 
        (keydown.enter)="search(id.id); $event.preventDefault();" 
        (click)="search(id.id)">Search Publication</button>

链接到working demo。

Answer 3

听起来默认浏览器行为正在复制您的事件 - 当您按Enter键时（当文本输入具有焦点时）会自动触发点击事件。

如果您从按钮中删除(keyup.enter)事件，它应该可以正常工作 - 或者您可以跳过依赖浏览器并将该事件添加到输入字段，而不是按钮。

Answer 4

最简单，最干净的方法是创建一个真实的表单，它将响应按钮的点击和按键的输入＆＃34;输入＆＃34;。

<form class="form-group" (ngSubmit)="search('test')">
  <div class="row">
    <div class="col-md-12">
      <div>
        <input type="text" class="form-control"/>
        <button class="btn btn-primary"
                type="submit">
          Search Publication
        </button>
      </div>
    </div>
  </div>
</form>

要调用的方法在（ngSubmit）中进行了预处理。按钮必须是＆＃34;提交＆＃34;。

在Angular4按钮中重复调用函数

4 个答案: