We Keep Coding

trigger focus event will fires blur event(without use alert and browser console)

jsfiddle link
<input id = "focus-ipt" type = "text" value = "nothing" />
var $focusIpt = document.querySelector( "#focus-ipt" );
$focusIpt.addEventListener( "blur", function ( e ) {
$focusIpt.value = "blured!";
} );
setTimeout( function () {
$focusIpt.focus();
}, 1000 );
I just trigger focus event,but blur event fired after focus;
I searched for a long time, close the console, use setTimeout,however, can't solve it;I really don't konw how this happened,can anyone help me?

This is actually not the case; focus() does not automatically trigger blur().
The blur() is getting triggered because you are interacting with the DOM. By clicking on one of the buttons in your fiddle (such as Run or Tidy), the #focus-ipt element is no longer active -- the button you're clicking on is.
If you simply wait the time out, without doing anything, the blur() event won't occur. As soon as you click off of the input, the blur() will occur.
This can be seen in the following example:
var $focusIpt = document.querySelector("#focus-ipt");
$focusIpt.addEventListener("blur", function(e) {
$focusIpt.value = "Blurred!";
});
setTimeout(function() {
$focusIpt.focus();
}, 1000);
<input id="focus-ipt" type="text" id="myText" value="Sample Text">
<button type="button">Click me to lose focus</button>
Hope this helps! :)

Prevent function execution twice within two triggered events

I have the following code:
myInput.change(function (e) { // this triggers first
triggerProcess();
});
myButton.click(function (e) { // this triggers second
triggerProcess();
});
The problem with the above is when I click myButton both events are triggered and triggerProcess() is fired twice which is not desired.
I only need triggerProcess() to fire once. How can I do that?

Small demo
You can have a static flag that disables any more triggers once the first trigger has occurred. Might look something like this:
var hasTriggered = false;
myInput.change(function (e) { // this triggers first
triggerProcess();
});
myButton.click(function (e) { // this triggers second
triggerProcess();
});
function triggerProcess () {
// If this process has already been triggered,
// don't execute the function
if (hasTriggered) return;
// Set the flag to signal that we've already triggered
hasTriggered = true;
// ...
}
For resetting the hasTriggered flag, that's entirely up to you and how this program works. Maybe after a certain event occurring in the program you'd want to reenable the ability to trigger this event again — all you'd need to do it set the hasTriggered flag back to true.

You can use the mousedown event, which will fire before the input is blurred, and then check if the input has focus by checking if it's the activeElement, and if it does have focus, don't fire the mousedown event, as the change event will fire instead.
Additionally, if you want a mousedown event to occur when the value hasn't changed, and the change event doesn't fire, you'll need a check for that as well
var myInput = $('#test1'),
myButton = $('#test2'),
i = 0;
myInput.change(function(e) { // this triggers first
$(this).data('prev', this.value);
triggerProcess();
});
myButton.mousedown(function(e) { // this triggers second
var inp = myInput.get(0);
if (document.activeElement !== inp || inp.value === myInput.data('prev'))
triggerProcess();
});
function triggerProcess() {
console.log('triggered : ' + (++i))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1">
<br />
<br />
<button id="test2">
Click
</button>

In a fairly typical scenario where you have an input with a button next to ie, eg quick search.
You want to fire when the input changes (ie onblur) but also if the user clicks the button.
In the case where the user changes the input then clicks the button without changing input focus (ie no blur), the change event fires because the text has changed and the click event fires because the button has been clicked.
One option is to debounce the desired event handler.
You can use a plugin or a simple setTimeout/clearTimeout, eg:
$('#inp').change(debounceProcess)
$('#btn').click(debounceProcess);
function debounceProcess() {
if (debounceProcess.timeout != null)
clearTimeout(debounceProcess.timeout);
debounceProcess.timeout = setTimeout(triggerProcess, 100)
}
function triggerProcess() {
console.log('process')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="inp">
<button id="btn">Click</button>

Use a real <button>BUTTON</button>. If you click on input text, alert is triggered, then once you leave the input text to click anywhere else, that unfocuses the input text which triggers the change event, so now 2 events have been triggered from the text input.
This is an assumption since the code provided is far from sufficient to give a complete and accurate answer. The HTML is needed as well as more jQuery/JavaScript. What is myInput and myButton actually referring to, etc.?
So I bet if you change...
var myButton = $('{whatever this is}'); and <input type='button'>
...TO:
var myButton = $("button"); and <button></button>
...you should no longer have an event trigger twice for an element.
This is assuming that triggerProcess() is a function that does something that doesn't manipulate the event chain or anything else involving events. This is an entirely different ballgame if instead of click() and change() methods you are using .trigger() or triggerHandler(), but it isn't. I'm not certain why such complex answers are derived from a question with very little info...?
BTW, if myInput is a search box and myButton is the button for myInput, as freedomn-m has mentioned, simply remove:
myButton.click(...
Leave myButton as a dummy. The change event is sufficient in that circumstance.
SNIPPET
var xInput = $('input');
var xButton = $('button'); //«———Add
xInput.on('change', alarm);
xInput.on('click', alarm);
xButton.on('click', alarm);
function alarm() {
return alert('Activated')
}
/* For demo it's not required */
[type='text'] {
width: 5ex;
}
b {
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='f1' name='f1'>
<input type='text'>
<input type='button' value='BUTTON TYPE'>
<label><b>⇦</b>Remove this button</label>
<button>BUTTON TAG</button>
<label><b>⇦</b>Replace it with this button</label>
</form>

Blur event cancels Click events with jQuery on Mobile device

I have a blur event in a textarea:
$("#question-id-5-answer").blur(function (event) {}
And a click event in the Submit button:
$("#" + _sendBtnId).on("click", function () {}
It happens that the Click event does not fire because the Blur event cancel the click event.
I can't use the Mousedown event because it's a touch device that does not detect it.

I tried saving the following on my mobile device as a htm file and accessed using Forefox application. Appears to be working as expected. Please have a look if it helps you.
<form id="myForm">
<textarea id="myTxt"></textarea>
<input type="button" id="butSubmit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#myTxt").blur(function() {
if($(this).val() != "") {
alert("retunging false");
return false;
}
alert("rextarea is empty");
});
$("#butSubmit").click(function() {
alert("submitted");
});
});
</script>

Jquery Keyboard Event trigger

I am trying to simulate a Keyboard event with jquery. What I want is when I click a button, I want a character to appear in a textarea. I need the action to be a keyboard simulation not a simple append. I have tried all the possible solutions on the web without any success, so I would be grateful if anyone can help me.
Here is my HTML/JS/Jquery code :
<html>
<head></head>
<body>
<script type='text/javascript' src='jquery-1.9.1.min.js'></script>
<input type='text' id="input"></input>
<script type='text/javascript'>
function simulateKeyPress() {
document.getElementById("text").focus();
var e = $.Event("keypress");
e.which = 97;
$("input").trigger(e);
}
</script>
<br/>
<button id="button" onclick='simulateKeyPress()'>Press Me</button>
</body>
</html>
As you can see, when the button is clicked, I only get a focus on the text element, but no character appears, any ideas?
looks like I was not clear enough. Here is another sample, I am using the MouseTrap library to capture keyboard events.
Here is my code.
<html>
<header>
<title>test</title>
</header>
<script type='text/javascript' src='MouseTrap.js'></script>
<script type='text/javascript' src='jquery-1.9.1.min.js'></script>
<body>
<input type='text' class="mousetrap" id="input"></input>
<script type='text/javascript'>
Mousetrap.bind('4', function(){alert("you pressed 4" );});
function simulateKeyPress(character) {
document.getElementById("input").focus();
var input = $('#input');
input.val(input.val() + character);
}
</script>
<br/>
<button type="button" onclick='simulateKeyPress(4)'>Press Me</button>
</body>
</html>
With this code, whenever you press '4' on the keyboard, an alert box will appear. All I want is when I click the button, the same event to be created. Ideas?

Here is one solution to simulate the keypress :
var input = $('#input');
$('#button').click(function(){
// Add a character to the input
input.val(input.val() + 'x');
// Trigger the keypress event
input.keypress();
});
// Check if it work
input.on('keypress', function(){
alert('key pressed!');
});
Here is a jsfiddle demo.

Javascript does not perform default actions when you fire it from javascript. So the only way is to create your own vent handler :
function simulateKeyPress() {
document.getElementById("text").focus();
var e = $.Event("keypress");
e.which = 97;
$("input").trigger(e);
}
$("input").on('keypress', function(e){
//append e.which to your input here
});

It doesn't seem possible to acheieve this without appending the characters manually to the textarea.
The answers that #HighKickX and #claustrofob wrote only triggers the event handler as if the specificed key was pressed, but not actually presses that key like happens when a key is pressed on the keyboard (probably due to security reasons).
Because only the event is fired but the key is not actually pressed the textarea won't have that character added automatically.

try this
<input id="field">
<button id="x" class="button">submit</button>
$(".button").click(function() {
var value = $("#field").val();
$("#field").val( $("#field").val() + value);
});

jQuery UI Dialog Button Won't Click

The alert is working, but the button just won't click...
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').click();
return false;
}
});
I have tried many different things, including reinitializing the method when the dialog gets opened, but nothing seems to work...
Html:
<div id="loginDialog" title="Please Login">
<div class="label">Password:</div>
<div class="field"><input type="password" /></div>
</div>

the ui-button is generated by jquery ui
I'm assuming from your comment that the button is generated dynamically and that any click event you have bound to is will have to be bound using event delegation, similar to:
$('body').on('click', '.ui-button', function(){...)
Instead of body, using the closest static element will work as well and would be preferred.

Please, try this:
$(function() {
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').trigger('click');
return false;
}
});
$('.ui-button').click(function() {
alert('hello world');
});
};
Here there is an example: http://jsfiddle.net/netme/YZH3B/

This should trigger the event ...
$('.ui-button').trigger('click');