[英]Call function when press ENTER
我在下面有這個代碼:
<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 函數?
如果您想在原始 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()
}
}
您始終可以將其包裝在一個表單中並調用 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>
你可以嘗試這樣的事情:
// 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
}
});
這是一個有用的提示
嘗試 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.