We Keep Coding

Why is trigger() triggering the select() handler 3 times?

$("#select-test").select(function(e){
//console.log(e)
console.log("selected")
})
$("#newTest").click(()=> {
$("#select-test").trigger("select")
})
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<button id="newTest">TEST ME</button>
<input type="text", id="select-test" value="some">
This is in Chrome, in Firefox, it's triggered twice.
I read this JQuery - Why does Trigger method call it three times? thread which talked about this issue, but honestly I couldn't understand it.
Somebody said:
we have 1 isTrigger and 2 simple select events.
What is that mean? 2 simple select events? Where? We only have 1 select event, where's the second one?
The best answer says that this happens because of bubbling, but... how? I mean, where's the bubbling? I don't see how this explain the event handler being triggered 3 times. Bubbling is when you target a child element, and the parent with the same handler is triggered too, but that's not what we have here. We only have ONE select handler, so .. where's the bubbling? And why is it triggered twice in Firefox?

A select needs a prevent default if you wish to stop it at some point.
the select event isn't the focus event, when a field becomes in focus. The select event gets fired when something is selected.
When you trigger the select event with the below code and have the browser tools open, you will see that the debugger shows the below code. When you select call stack -> dispatch, you can see what triggered the event and see that the third event is triggered by a native event.
var count = 0;
$("#select-test").select(function(e){
if(count == 2) {
debugger;
}
count++;
console.log("selected")
})
$("#newTest").click(()=> {
count = 0
$("#select-test").trigger("select")
})
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<button id="newTest">TEST ME</button>
<input type="text", id="select-test" value="some">
If we look at the documentation for select we see this:
In addition, the default select action on the field will be fired, so the entire text field will be selected.
So what happens is:
You trigger select -> jquery fires select to all event handlers
jQuery focusses the field, which triggers an automatic browser select all text, which triggers the select event.
Jquery selects all text in the field, native select is triggered, which is wrapped by jquery and then passed on to the handlers.
To stop any of these steps from happening you can use event.preventDefault() on the first time select is triggered, this will have the side event of not selecting the text.
Rather than using select I suggest you use focus() unless you really need to know what text is selected every time a select is triggered.

I have no idea why .select() (and also .on("select")) trigger three times, but .one("select") triggers once :
const $selectTest = $("#select-test");
$selectTest.one("select", function(e){
console.log(e.target)
console.log("selected")
});
$("#newTest").click(()=> {
console.log("Clicked");
$selectTest.trigger("select")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="newTest">TEST ME</button>
<input type="text", id="select-test" value="some">

Checking how an element gained focus

Context
I have a backbone app with an event listener for focus events on a textarea. Backbone uses jQuery events, so core of my question centers around jQuery focus events.
Question
Is there a way to tell how an element came into focus, be it by click or tab?
The behavior of how the cursor gets positioned needs to be handled differently between these two cases, however there doesn't seem to be a way to distinguish between the two offhand.
I could listen to click events, however will still need to listen to focus to capture tabbing - this will overlap with click event as it will also focus the textarea resulting in double events.
I may to rethink this entirely.
JSBin Example
$('textarea')
.focus(function(event){
console.log('You focused me by' + event.type);
// Here I wish I know if the focus came from a 'click' or 'tab' events
});
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form>
<input placeholder="focus me, then tab" type="text"><br>
<textarea>Focus me via click. Now try via tabbing.</textarea>
</form>
</body>
</html>

.onfocus() listener can get called in a number of ways which makes it a tricky even to bind to.
Click on element
Tab or Shift-Tab to element
jQuery programatic focus $( "#target" ).focus();
Switching between programs, and refocusing the internet browser
There is no unique identifier in the onfocus event to determine how it came into focus.
From what I found it is best to be more explicit and listen to click() and onkeyup() events to handle unique behaviors between them and avoid unexpected function calls (like the browser is refocused).
onkeyup() is great for capturing tab events as the tab key will be released 'up' when tabbing in, but not when tabbing out.
JSBin
$('textarea')
.click(focusedBy)
.keyup(checkTab);
function checkTab(event){
if (event.keyCode === 9) {
focusedBy(event);
}
}
function focusedBy (event){
console.log('You focused me by ' + event.type);
}

you will need a combo of focus, click and blur events to determine the origin of "getting focus". click->set value, focus -> check if that clickvalue was set -> do what you must -> reset on blur. you might also want to be looking out for ontouchdown

You could set a clicked variable on mousedown.
You'll need to blur the textarea on mousedown so that focus will will be triggered on mouseup:
var clicked= false;
$('textarea')
.focus(function(event) {
if(clicked) {
$('#status').html('clicked');
clicked= false;
}
else {
$('#status').html('tabbed');
}
})
.mousedown(function(event) {
clicked= true;
$(this).blur();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input placeholder="focus me, then tab" type="text"><br>
<textarea>Focus me via click. Now try via tabbing.</textarea>
</form>
<div id="status"></div>

here's a scaling way to do it without rerouting events or simulating extra actions:
var targ=$('textarea');
targ.focus(function(event){
console.log('You focused me by ' + targ.eventType);
// Here I wish I know if the focus came from a 'click' or 'tab' events
});
$("body").mousedown(function(e){
targ.eventType="mouse";
}).keydown(function(e){
targ.eventType="keyboard";
});
this uses the jQuery collection to store the last event type, which is set by document-wide handlers.
if you need to re-use this functionality on other input types, just add more selectors to targ and differentiate in the handler using event.target.
http://jsbin.com/ruqekequva/2/edit

Phonegap Android show keyboard on input focus Javascript

I have been searching for how to trigger the android keyboard via Javascript.
I have found a few answers but none of them seem to work.
One solution is here:
Showing Android's soft keyboard when a field is .focus()'d using javascript
On the example above there is a button involved which I don't have, but do I need it?
I am using 'tap' and 'swipe' events via the touch-layer.js which seems to disable click events in favour of tap. (https://github.com/cubiq/touch-layer)
Below is the code I've tried, the alert triggers and the focus happens but the keyboard doesn't show.
gt("#txtEmail").on("tap", function() {
alert('tap');
$(this)[0].el[0].focus();
$("#txtEmail").trigger('click');
});
Thanks.
EDIT 1: Second attempt doesn't work even though this seems more inline with the example.
gt("#txtEmail").on("tap", function() {
alert('trigger');
$("#txtEmail").trigger('click');
});
$("#txtEmail").on("click", function() {
alert('recieved');
$(this).focus();
});

In addition to Jack He's suggstion, check out ionic-plugin-keyboard. This one is more actively maintained and used by many.
In my case, I just bound focus event to a handler function that manually shows the keyboard.
$(".my-input").on("focus", function(e) {
...
cordova.plugins.Keyboard.show();
...
});

What you need is the SoftKeyBoard plugin. Just check the link to find what you want.

Keypress event doesn't work in internet explorer

i have the follow code:
<input class="any" type="text" id="myId" name="myName" />
this input is a jquery datepicker.. (http://jqueryui.com/datepicker/)
My JS is as follows:
$('#myId').keypress(function(evt) {
//codes
});
I tried keypress, keydown and keyup.. all not working in IE..
May be because of the jquery date picker plugin?
I also tried with jquery hotkey plugin (https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js)
But, no success :(
i just want to capture the enter event..
Any help?
Felipe

If the element doesn't exist on the page on the initial load, then the event may not be bound to the button. Not sure why it works in other browsers though.
Could possibly try this to see if it helps
$(document).on('keypress', '#myId', function() {
// ....
});
if you're using an older version of jQuery, then you'll need to use .live().

Solved: http://jsfiddle.net/MJWUw/
IE doesn't recognize a keyevent just with click in this input, but if i navigate until the field with tabspace it works..
i did a workaround to solve this, set the focus manually and it's working right now.
$("#myId").click(function(evt){$(this).focus();});
$('#myId').keyup(function(evt) {
alert('working!')
});
att

DOMAttrModified doesn't fire

I'm trying to trigger an event handler when a script modifies an input element (text field.) On Internet Explorer, I can use the onpropertychange event, but on Firefox and other browsers there is no such event. So, according to the W3C docs, it seems the DOMAttrModified event does exactly what I want. But it doesn't fire in Firefox 11.
Here's a simple code snippet which reproduces the problem. I have an input text field, and a button which adds a character to the value attribute of the input text field. Clicking on the add char button should cause the DOMAttrModified event to fire:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addChar() {
var q = document.getElementById("query");
q.value += "X";
}
function loadevents() {
var q = document.getElementById("query");
q.addEventListener("DOMAttrModified", function() {alert("DOMAttrModified event!");
}, false);
}
</script>
</head>
<body onLoad="loadevents()">
<input type="text" id="query">
<br>
<input type="submit" value="add char" onclick="addChar()">
</body>
</html>
But it doesn't. Any idea what I'm doing wrong? (I know that DOM Level 3 deprecates this event, but there doesn't seem to be a viable alternative right now. As far as I know, Firefox 11 still supports it.)

Changing the value in an input doesn't fire the DOMAttrModified event, that's all..
You need to change the attribute of the input node, not the property of the variable.
It's like the difference between the two jQuery functions: .prop and .attr
Read:
Which HTMLElement property change generates DOMAttrModified?
this forum discussion

(repeating my answer from Which HTMLElement property change generates DOMAttrModified? here, because it's relevant to this question):
Please also note that NO DOMAttrModified events will be fired when the 'disabled' attribute is set. So if your event is not firing, that could be the reason. This also goes for the IE-only 'onPropertyChange' event.