I have a form in which I have enter-key press event and ng-blur. It's like when a user enters something and click elsewhere the form is submitted similarly if a user writes something and press enter the form is submitted and API call goes.
Problem Statement
It works fine on ng-blur only a single call goes to the API. But when I try to use key event two calls go. That's why two success messages show. I don't know why but it acting like that.
Form
input ng-model="cusBoard.boardData.musicalWorkName"
id="superTitleInput" class="title-edit-input superTitle-input" type="text"
maxlength="50"
my-key-enter="cusBoard.updateInfo()"
ng-blur="cusBoard.updateInfo()">
My-key-enter Directive
app.directive('myKeyEnter', function () {
return {
controller: 'SignInController',
link: function (scope, elements, attrs) {
elements.bind('keydown keypress', function (event) {
if (event.which === 13) {
scope.$apply(function () {
scope.$eval(attrs.myKeyEnter);
});
event.preventDefault();
}
});
}
}
controller function
function updateInfo(){
editable('superTitle',0);
var params = {
superTitle : cusBoard.boardData.musicalWorkName,
boardId : cusBoard.boardData._id
};
CastingBoard.updateSuperTitle(params).then(function (res) {
if (res.msgCode === '405') {
$mdToast.show($mdToast.simple().textContent("Board title updated successfully.").position('bottom right'));
}
});
}
You're binding to both the keydown and keypress events:
elements.bind('keydown keypress', function (event) {
Both events are fired for the Enter key, so the handler is executed twice.
Just pick one, or the other.
Related
I have an event listener on all textboxes. When a textbox is clicked, I'd like to open a keyboard. On Enter of the keyboard I'd then like to use the id of the textbox which called it to do some logic. However the id (txtbxId in code) just becomes the first textbox I click, then the second textbox I click in an array.
E.g, the alert becomes 'textbox1' - after second textbox click alert is 'textbox1' 'textbox2'
I've tried to force the variable id to '', to delete it etc. to no avail,
Code snippet here:
$('.textbox').click(function() {
var txtbxId = this.id;
$("#Keyboard").show();
$(document).on('keydown', function(e) {
if (e.which === 13) {
alert(txtbxId);
}
});
});
});
The issue is because you're nesting events. Therefore as well as duplicating the keydown event when a click event happens, you're supplying each individual id to those events.
To fix this, use a single event handler for all the .textbox elements, and read their own id from the reference to the element which raised the event which is available through the this keyword:
$('.textbox').click(function() {
$("#Keyboard").show();
});
$(document).on('keydown', '.textbox', function(e) {
if (e.which === 13) {
alert(this.id);
}
});
The problem is that your on('keydown') function the first time you click a textbox never gets unassigned, so for every time you click a .textbox, you're making a NEW keydown callback, but not removing your old ones.
I would recommend making an object outside of your onClick callback which manages .keydown callbacks, so that you only have one at any time.
Something like this:
window.keydownmanager = {
init: () => {
$(document).on('keydown', function (e) {
window.keydownmanager.callback(e);
});
},
callback: () => {},
setCallback: (cb) => {
window.keydownmanager.callback = cb;
}
}
And inside your onClick callback, do this:
var txtbxId = this.id;
$("#Keyboard").show();
window.keydownmanager.setCallback(function(e) {
if (e.which === 13) {
alert(txtbxId);
}
})
I have the following code:
index.html:
<a href="" class=”buttonone" ng-click="tool.disc()">
<i class=”buttonone"></i>
</a>
controller.js:
angular.module(’app')
How can I make so that when someone presses a keystroke example 'enter key' the tool.disc() method gets triggered? I suppose I can use angularjs ngKeydown directive but I dont know how to implement it in the code example above. Could someone try to help? Thanks!
You cannot directly call the function specifically on Enter key press, use a function to check if the Enter key is pressed and then call your function.
You cannot listen Keypress event on anchor.
HTML:
<input type="text" ng-keypress="myFunc(e)" />
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
<i class=”buttonone"></i>
Controller:
$scope.myFunc = function (event) {
if (event.keyCode === 13) {
console.log('Enter key pressed');
$scope.tool.disc(); // Call your function here
}
};
The element needs to be in focus to work. To make this example work you will need to click the link and then press a key.
Keydown
$scope.keydown = function (event) {
if (event.keyCode === 13) {
console.log('Enter key pressed');
}
};
To auto focus on the element once loaded you could use
element[0].focus()
Otherwise, consider the follow:
$document.addEventListener('keyup', function (e) { console.log(e) })
ng-keypress or ng-keydown can do the trick :
<div ng-keypress="yourFunction($event)> </div>
And then in your function, you can test the code of the key with
$event.keyCode;
For example, if you want to chech on enter :
$scope.yourFunction = function(event){
if(event.keyCode == 13){
console.log("Enter press");
}
}
Edit :
Because sometime it doesn't work as much as angular wanted it, there is a directive :
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();
}
});
};
});
Here this one is for enter, you can change the keycode if you need. To use it you can simply do this in every element :
<a href="" class="buttonone" ng-enter="function()" ng-click="tool.disc()">
<i class=”buttonone"></i>
</a>
i have a directive that has several inputs inside of it, and i have an specific input that i need to execute a function when enter is pressed.
This is the input that i need to execute a function.
<input type="text" class="form-control" ng-model="cep" id="inputcep">
And i have a jquery function that uses a mask plugin and a keypress listener that prevents the default action of the enter key and executes the function. My problem is that the keypress is not being called, but the mask is being applied :/
$(document).ready(function () {
$('#inputcep')
.keypress(function(ev){
console.log(ev);
if(ev.keyCode == 13){
ev.preventDefault();
scope.searchCep(scope.cep);
}
})
.mask('00000-000');
});
Use angular instead of jQuery :
https://docs.angularjs.org/api/ng/directive/ngKeypress
Do create you custom directive as below.
Directive
app.directive('customDir', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
element.keypress(function(ev) {
console.log(ev);
if (ev.keyCode == 13) {
ev.preventDefault();
scope.searchCep(scope.cep);
}
}).mask('00000-000');
});
};
});
Our users complain that when they press the enter key after pasting or typing values in a jQuery autocomplete widget the form is submitted.
It's extremely annoying them when they copy-paste a value that exists in the autocomplete options the autocomplete widget opens to show that single value, they press Enter to accept that value but then the form is submitted before they finished filling all the fields because (by default and we don't want to change it) the widget won't select the first option in the menu.
<form>Type C and press Enter:
<input id="autocomplete" />
<input type="submit" value="submit" />
</form>
$('form').submit(function () {
alert('You submitted the form');
return false;
});
$('#autocomplete').autocomplete({
source: ["c#", "c", "c++", "java", "php", "coldfusion"]
});
DEMO of the problem
How can we change that clicking Enter will only close the autocomplete suggestions?
It seems like jQuery UI didn't left a backdoor to customize the widget out of the box, so what you can do is override the autocomplete function to register a callback for the onkeypress event, capture the Enter and stop the propagation so it won't submit the form if the widget is open=visible.
Here how it goes:
function cancelAutocompleteSumbission(e) {
// Make sure this is a nodeElement and the button pressed was Enter-Return
if (!this.nodeType || e.which != 13)
return;
// If the widget is visible we simply want to close the widget.
if ($(this).autocomplete('widget').is(':visible')) {
$(this).autocomplete('close');
return false;
}
}
// Making a private scope to avoid naming collision.
$.fn.autocomplete = (function () {
// Cache the old autocomplete function.
var oldAutocomplete = $.fn.autocomplete;
// This will be the new autocomplete function.
return function () {
// If the first argument isn't "destroy" which
// should restore the input to it's initial state.
if (!/^destroy$/i.test(arguments[0]))
// Attach event to the input which will prevent Enter submission as
// explained above.
this.keypress(cancelAutocompleteSumbission);
// We need to restore the input to it's initial state,
// detach the keypress callback.
else
this.off('keypress', cancelAutocompleteSumbission);
// Call the cached function with the give "this" scope and paramteres.
return oldAutocomplete.apply(this, arguments);
};
})();
Live DEMO
Notes:
To change all the autocomplete widgets you need to use jQuery's prototype, $.fn is an alias to $.prototype.
Also you need to change $.fn.autocomplete before you use it it or the changes you made won't apply to those widget.
this inside the autocomplete function is actually a jQuery object so you don't need to wrap it with $(this)
You might say, Hey you keep register the very same callback for the keypress event. Well, that's exactly what I'm doing and why I wrote the callback as a named function. If you pass the same callback to addEventListener it will register it only once. MDN, Specifications
Adding code to a javascript function programmatically
I might have a simpler solution by using jQuery autocomplete's autocompleteclose and autocompleteopen events.
See the code below:
var flag = 0; //global variable
$("#autocomplete").on({
autocompleteclose: function (event, ui) {
flag = 1;
//set flag back to 0 with a short delay so the next keypress can submit form
setTimeout(function () {
flag = 0;
}, 100);
},
//if the autocomplete widget is open, don't submit form on keypress
autocompleteopen: function (event, ui) {
flag = 1;
}
});
$('body').keypress(function(e) {
if (e.keyCode == '13') {
if (flag != 0) {
e.preventDefault();
} else {
//submit form
}
}
});
var flag = 0; //global variable
$("#autocomplete").on({
autocompleteclose: function (event, ui) {
flag = 1;
//set flag back to 0 with a short delay so the next keypress can submit form
setTimeout(function () {
flag = 0;
}, 100);
},
//if the autocomplete widget is open, don't submit form on keypress
autocompleteopen: function (event, ui) {
flag = 1;
}
});
$('body').keypress(function (e) {
if (e.keyCode == '13') {
if (flag != 0) {
e.preventDefault();
} else {
//submit form
}
}
});
$('form').submit(function () {
alert('You submitted the form');
return false;
});
$('#autocomplete').autocomplete({
source: ["c#", "c", "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<form>Type C and press Enter:
<input id="autocomplete" />
<input type="submit" value="submit" />
</form>
I was somehow against overriding the jqueryui implementation and did the following:
in the close event of the autocomplete i set a flag "doNotSubmit" when enter was pressed
in your case then i'd bound a submit event listener to the form which checks the doNotSubmit flag and acts accordingly.
The basic idea behind it, is that jqueryui's close event is triggered before keyup or submit events and gives you the keycode. So you can in another place (keyup, submit, etc.) consume that one unwanted enter or other keypress.
This question is similar to this one. While the solutions on that page are straight forward, they depend on the ID's of elements on the page. I use autocomplete on lots of pages so I prefer gdoron's approach (on this page). Thanks to him for doing the heavy lifting.
However, I think there is a bug in his code. If you go to an autocomplete field that already has content and type a return, it will submit the form. Here is a fix (the change is the second "if block in cancelAutocompleteSumbission):
function cancelAutocompleteSumbission(e) {
// Make sure this is a nodeElement and the button pressed was Enter-Return
if (!this.nodeType || e.which != 13)
return;
if (!$(this).autocomplete('widget').is(':visible') && e.which === 13){
return false;
}
// If the widget is visible we simply want to close the widget.
if ($(this).autocomplete('widget').is(':visible')) {
$(this).autocomplete('close');
return false;
}
}
// Making a private scope to avoid naming collision.
$.fn.autocomplete = (function () {
// Cache the old autocomplete function.
var oldAutocomplete = $.fn.autocomplete;
// This will be the new autocomplete function.
return function () {
// If the first argument isn't "destroy" which
// should restore the input to it's initial state.
if (!/^destroy$/i.test(arguments[0]))
// Attach event to the input which will prevent Enter submission as
// explained above.
this.keypress(cancelAutocompleteSumbission);
// We need to restore the input to it's initial state,
// detach the keypress callback.
else
this.off('keypress', cancelAutocompleteSumbission);
// Call the cached function with the give "this" scope and paramteres.
return oldAutocomplete.apply(this, arguments);
};
})();
Live Demo
So, I have a login controller, you can click login with mouse or press Enter key, like this:
Ext.define('My.controller.Login', {
extend: 'Ext.app.Controller',
init: function(application) {
this.control({
"#idLogin button": {click: this.onButton},
"#idLogin form > *": {specialkey: this.onKey}
});
},
onButton: function(button, e, eOpts) {
var win = button.up('window'); // the login window
//do more stuff...
},
onKey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER) //ENTER key performs Login
Ext.getCmp('#idLogin button').fireEvent('click');
}
});
I realised when I use the mouse to click the Login button, onButton function works properly, button.up() returns me the Login window.
However, if I pressed Enter key and fires the onKey function to do fireEvent('click'), in this case the onButton fires up but parameter button NOT the same as the button parameter received when you click by mouse! And this time, button.up() function is undefined.
Question is, why does fireEvent('click') give me a different button parameter?
You must use the fireEvent function like that:
var myBtn = Ext.getCmp('#idLogin button');
myBtn.fireEvent('click', myBtn);
Give it a try.
Because the button click event is a synthetic event fired by the framework. It passes along the button instance and an event object. fireEvent means "notify any subscribers that this event has happened, with these arguments", not "trigger a click event on the underlying button".
So you'd need to use:
button.fireEvent('click', button);
However, this doesn't really make sense, you're just adding an extra layer of indirection.
Why not abstract it out:
Ext.define('My.controller.Login', {
extend: 'Ext.app.Controller',
init: function(application) {
this.control({
"#idLogin button": {click: this.onButton},
"#idLogin form > *": {specialkey: this.onKey}
});
},
onButton: function(button, e, eOpts) {
this.doWindowFoo();
},
onKey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER) //ENTER key performs Login
this.doWindowFoo();
},
doWindowFoo: function() {
// Assumes the window has an id idLogin, there are several other ways to get a reference
var win = Ext.getCmp('idLogin');
}
});
Use:
var button= Ext.getCmp('#idLogin button');
button.fireHandler();
this will call the handler function in your button, in my case it worked, due i override that button handler with additional functionality and parameters value changes...(extjs 4.1.1)
Ext.getCmp('#idLogin button').handler();
A more general way:
document.querySelector("what-ever-el-selector").click();
Tested on extjs 4.2.6
Cheers