We Keep Coding

Angular hover in + key press events

I'm pasting this sample code, which listens for mouseenter event and on mouseenter checks if Ctrl key is pressed. If yes, it applies some classes to the current target, which works fine, BUT only if the Ctrl key is pressed prior to the mouseenter event. What do I have to change for the same thing to happen also in the case where the mouseenter is first and then the Ctrl key is pressed?
html:
<div ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)"> Some content </div>
controller.js:
function hoverIn(event){
if((event.ctrlKey || event.metaKey)){
angular.element(event.currentTarget).addClass('current-element');
}
}

I know this is very old but I wanted to resolve it in case someone else came by it.
Changing your code to use ng-mousemove will get you what you want. Then in code handle both the true and false possibilities.
HTML:
<div ng-mousemove="mouseHover($event)"> Some content </div>
JavaScript:
scope.mouseHover = function ($event) {
if ($event && $event.ctrlKey) {
angular.element($event.currentTarget).addClass('actionCursor');
}
else {
angular.element($event.currentTarget).removeClass('actionCursor');
}
}

Disabled button still fires using ".click()"

It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>
function save(){
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
function byPassDisabled(){
$('#saveButton').click();
}
see http://jsfiddle.net/WzEvs/363/
In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.
But why? This behavior doesn't seem fair to me.
Any workaround?

The attribute only disables user interaction, the button is still usable programmatically.
So yeah, you gotta check
function byPassDisabled(){
$('#saveButton:enabled').click();
}
Alternatively don't use inline handlers.
$(document).on('click', '#saveButton:enabled', function(){
// ...
});

For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.
const element = document.getElementById('saveButton');
element.click() //this would not work

You can programmatically trigger click on a disabled button.
There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/
$(function () {
$("#saveButton").on('click', function (e) {
if (!e.isTrigger) {
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
});
$("#bypassButton").on('click', function (e) {
$("#saveButton").click();
});
});
e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.

You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) .
off or unbind the click will solve this issue.
Thanks

Using jQuery to trigger Enter event

I have an image tag :
<img src='Presale.png' alt='presell' onclick="presell()"/> Presell
Function :
function presell()
{
$(".form-control").val("presell");
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
$(".form-control").trigger(e);
}
What I wanted to do was to fill a search box with some text and trigger enter the moment a particular image is clicked so that search related to that image is made. But this code is putting the value to the search box but not triggering enter.

You need to submit the actual form, instead of triggering a keypress event with enter's keycode (does not work)
e.g.
$("form").submit();

You can do it like this:
<img src='Presale.png' alt='presell' /> Presell
<form>
<input type="text" class="form-control" />
</form>
Note: I removed the click handler from the image.
And in the JS:
$("img").on("click", function(){
$(".form-control").val("presell");
$("form").submit();
});
Demo

I assume what you need is to simulate a 'return/enter' key press which would most naturally submit the value of the input (which can be via submit/AJAX)
.trigger() would call the eventhandler and not simulate the native browser event. Refer: http://learn.jquery.com/events/triggering-event-handlers/
You would then need to bind an event handler to the enter keypress and provide what is to be done anyway. Which means including .submit() or post() or $.ajax() or whatever code that is called (unless it is defined on a trigger handler)
What you probably need is .simulate(); available via jquery.simulate.js

Prevent Enter key works as mouse click

I noticed that if you focus on an element that mouse clic can be triggered, the Enter keys acts like as you left click the mouse. I want to avoid this running since it comes into conflict in other pieces of my code.
In the following example if I focus on this imageButton and I clic once, the next clicks can be "done" with the Enter key, so I don't want this because this button fires a slideToggle() and shows a hidden div, so IMO it's pointless toggle this div with the keyboard.
Is there any way to make it global way?
Thank you.

Try this:
$(".myElements").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
It will stop the enter key behaviour only, allowing the other key functions to work as usual.

Listen for "keypress" and .preventDefault()
ex. with <myelm class="nokey"/>
function noKeyPressing(){
var elms = document.getElementsByClassName('nokey'),
stop = function stop(e){ return e.preventDefault(), false; },
i = elms.length;
while(--i >= 0){
elms[i].addEventListener('keypress', stop, true);
}
}
noKeyPressing()
If you just want to prevent Enter then the keyCode to look for is 13.

try
.unbind('keydown');
to disable all key events on your element

You can return false to prevent the default action.
<input type="submit" onkeypress="return false;" value="Submit" />

An other possible way i think:
$('.elems').on('click',function(){$(this).blur()});

try this code
$('body *').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
}
});
the above code will prevent pressing enter for every element in page
,You can change the selector $('body *') to something else depending to your case

onkeypress + onblur in Javascript

The onblur event in Javascript is triggered when the element loses focus.
The onkeydown occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.
If I want to validate a date field, the onkeydown event concerns 9 and 13 (enter and tab key).
But when I press the enter key, then I receive duplicate alert message.
Of course in this case we have two tests, onblur and onkeydown event.
this is the html code :
<html:text onblur="return onDateChange(this);"
onkeydown="return onDateKeyPress(this);"/>
the onDateChange() method is :
function onDateChange(obj){
//validateField is an externatl javascript method which trigger an alert message if we have errors in date
if(validateField(obj,'date',dateFormat)){
//do instructions
}
}
and finally the onDateKeyPress() method is :
function onDateKeyPress(obj){
if(window.event.keyCode == 9)
{
if(validateField(obj,'date',dateFormat))
{
//do instructions
}
}
if(window.event.keyCode == 13)
{
if(validateField(obj,'date',dateFormat))
{
//do instructions
}
}
}
So, the problem is to have one display alert message.
Any suggestions?

you can do it easily with jquery
$('#text_field_id').bind({
blur: function(event) {
if(validateField(this,'date',dateFormat)){
//do instructions
}
},
keydown: function(event) {
if(event.keyCode == 9)
{
if(validateField(this,'date',dateFormat))
{
//do instructions
}
}
if(event.keyCode == 13)
{
if(validateField(this,'date',dateFormat))
{
//do instructions
}
}
}
});
you dont need to include onclick or onkeydown in your text element. One small question you want to execute same instructions in all cases or different instructions???? if you want to execute same instructions, lot of codes can be removed.

In the solution above; keydownFired is true when blur is fired and the if branch of the code does nothing. so nothing happens.
If the blur has something to do other than showing alert; then the follwoing should work.
input.addEventListener('blur', function (e) {
doSomethingThatshldHappenAlwaysOnBLur();
if (keydownFired) {
keydownFired = false
} else {
showAlert();
}
})

Recently I had a problem with having onkeypress and onblur attached to one element. One of the major problems with onkeypress and onkeyblur is that they by nature will trigger each other :) (Triggered? Get it? That's a joke btw. I am bad at jokes, sorry!)
The solution is simple and stupid. Instead of having an alert when onkeypress happens AND when onblur happens you trigger only onblur. How?
//I gave this thing and id. You should always give your things and id. Ids are cool and I love them.
<html:text id="thisIsMyId"
onblur="return onDateChange(this);"
onkeydown="return onDateKeyPress(this)";
/>
the onDateChange() method will stay pretty much the same:
//This will stay the same, you will see why, soon
function onDateChange(obj){
//ValidateField is an externatl javascript method which trigger an alert message if we have errors in date
//If you might have noticed tha **this validate** function is used 3 times, why?
if(validateField(obj,'date',dateFormat)){
//do instructions and **I assume the alert?**
}
}
Now, we will make onDateKeyPress() a little bit blurry :)
//Here is where we strike
function onDateKeyPress(obj){
//This looks weird but it checks if the keycode actually works in the browswer
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
//Instead of having 2 ifs just make one if with and the logical operator "or" :)
if(keycode == 13 || keycode == 9){
//I am not sure if oyu need to use this but in the example I had, I had to use
//my validation-function otherwise it would just submit
if(validateField(this,'date',dateFormat)){
//If you have a submit form or something this can help
event.stopPropagation();
//we just trigged the onBlur Handler by "blurring" this thing :)
document.getElementById('thisIsMyId').blur();
}
}
With this we did cut one validation and have to write the logic only once. Only in the onDateChange() function.
If someone can make it even better please comment below. I would like to make the code even shorter.
At the end of the day it still depends on the specific situation. It worked for me but this is not a "fits-all-solution".