按 ENTER 时调用函数

Question

我在下面有这个代码：

<div class="search-container">
    <input id="search-value" type="text" autocomplete="off" ng-model="vm.searchQuery" ng-focus="vm.searchBoxHasFocus = true" ng-blur="vm.searchBoxHasFocus = false" class="search-box-input ng-pristine ng-untouched ng-valid ng-empty" placeholder="Pesquisar" ng-enter="vm.goSearch()" ng-change="vm.getSuggestions()">
    <div class="label-search" ng-click="vm.goSearch()"></div>
    <button type="button" class="reset-search" ng-click="vm.clearQuery()"></button>
</div>

当我在输入中按“回车”时如何调用 JS 函数？

Answer 1

如果您想在原始 javascript 中执行此操作，您可以使用以下绑定将整个文档的 Enter 键绑定到您希望调用的函数。

// Load in the enter keybindings
document.onkeydown = function (e) {
    switch (e.which || e.keyCode) {
        case 13 : //Your Code Here (13 is ascii code for 'ENTER')
            vm.clearQuery()
    }   
}

Answer 2

您始终可以将其包装在一个表单中并调用 onsubmit 并将 vm.goSearch() 更改为您的实际功能。

<form onsubmit="return function(){vm.goSearch();return false;};">
<div class="search-container">
    <input id="search-value" type="text" autocomplete="off" ng-model="vm.searchQuery" ng-focus="vm.searchBoxHasFocus = true" ng-blur="vm.searchBoxHasFocus = false" class="search-box-input ng-pristine ng-untouched ng-valid ng-empty" placeholder="Pesquisar" ng-enter="vm.goSearch()" ng-change="vm.getSuggestions()">
    <div class="label-search" ng-click="vm.goSearch()"></div>
    <button type="button" class="reset-search" ng-click="vm.clearQuery()"></button>
</div>
</form>

Answer 3

你可以尝试这样的事情：

// Get the input field you want
    var input = document.getElementById("search-value");

    // Execute a function when the user releases a key on the keyboard
    input.addEventListener("keyup", function(event) {
      // Cancel the default action, if needed
      event.preventDefault();
      // Number 13 is the "Enter" key on the keyboard
      if (event.keyCode === 13) {
        // Trigger the button element with a click
        document.getElementById("ElementId").click();
        //or function call here
      }
    });

这是一个有用的提示

使用 HTML/DOM 处理事件

Answer 4

尝试 ng-keypress 事件并读取 keyCode = 13 以进行输入。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > 
</script>
<body>

 <div ng-app="myApp" ng-controller="myCtrl">

 First Name: <input type="text" ng-model="firstName"><br>
 Last Name: <input type="text" ng-model="lastName" ng-keypress="keypress($event)"> 
 <br>
 <br>


 </div>

 <script>
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.keypress=function(e) {
if(e.keyCode == 13) {
 console.log('Enter');
 }
}  
});
</script>

按 ENTER 时调用函数

问题描述

4 个解决方案

解决方案1
0 2019-01-24 22:25:59

解决方案2
0 2019-01-24 22:27:06

解决方案3
0 2019-01-24 22:35:57

解决方案4
0 2019-01-25 08:11:07

按 ENTER 时调用函数

问题描述

4 个解决方案

解决方案1 0 2019-01-24 22:25:59

解决方案2 0 2019-01-24 22:27:06

解决方案3 0 2019-01-24 22:35:57

解决方案4 0 2019-01-25 08:11:07

解决方案1
0 2019-01-24 22:25:59

解决方案2
0 2019-01-24 22:27:06

解决方案3
0 2019-01-24 22:35:57

解决方案4
0 2019-01-25 08:11:07