We Keep Coding

Why doesn't this jQuery focusout and change function work?

This must be simple, but I can't see what is preventing this combonation .focusout and .change function from working.
I want the first input to copy to the second when the focus leaves the first input. No errors in the console. Fiddle: https://jsfiddle.net/fh8t6mm0/
The reason I want to use focusout is that the .change and .val function doesn't work reliably for some reason.
HTML:
<div id="focusoutdiv">
<input class="fieldone" type="text">
<input class="fieldtwo" type="text">
</div>
JS:
$('#focusoutdiv').focusout(function() {
$('.fieldone').change(function() {
$('.fieldtwo').val($(this).val());
});
});

You can also use blur event to copy text from one textbox to other. Below code mightbe helpful for you
$('.fieldone').blur(function() {
$('.fieldtwo').val($(this).val());
});

Do not use the change event inside focusout event. Because, they need to be defined separately to work as expected. Moreover in your code snippet, change event alone enough to achieve your requirement. Please refer the following example.
$('.fieldone').change(function() {
$('.fieldtwo').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="focusoutdiv">
<input class="fieldone" type="text">
<input class="fieldtwo" type="text">
</div>

Pressing Enter/Return key doesn't trigger button click in Safari

I have a structure of the following format , which I display in a Bootstrap modal.
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$(".jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
In Firefox, Chrome and IE when I press Enter/Return key after filling the inputs, the button click is triggered.
But in Safari [v4.0.3] , it doesn't trigger the button click! Rather it seems to postback to the same page.
Is this a known issue in Safari?
If yes, any workaround?
If no, could someone please help me with figuring out the root problem?
P.S. :
1. I'm familiar with the Javascript code for triggering button click on Enter keypress event. Just curious as to why the above won't work only in Safari.
2.Just for clarification, pressing Enter key while I'm still on the input control and not by pressing tab to first focus on the button and then press Enter.

Add the input fields and buttons to a form.
try using this but i m not sure about this is the right way to do it.
in that case you better add two js listener functions to the input fields. as
`
<div>
<input id="one" type="text"/>
<input id="two" type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"> </button>
<!--Click event handled in Javascript code-->
</div>
$('#one').keypress(function(e){
if(e.which == 13) {
//call your code
}
});
$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
}
});
better you write three listeners one for button other two for two input files. hope this ill help you. i am not sure about this solution. please let me know after trying it.

Instead of class attribute use id attribute onclick event ,
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" id="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$("#jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
if you do not want to add ID you can delegate event to the document so event will work on DOM which has defined class.
Example
<script type="text/javascript">
$(function(){
$(document).on('click', ".jSomeButton" ,function(){
alert('works');
});
});
</script>

#Vandesh,
As posted in comments, I suggest you put up a form tag around your entire form.
Have a look at this JSFiddle for more idea.
http://jsfiddle.net/JUryD/
I tried this on Safari, Chrome, IE6+, Opera and Firefox 22+
Let me know if you face any other troubles.
Here is the code:
<div>
<form>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;">Send</button>
</form>
</div>

onchange hijacks onclick

Modifying the text and then clicking on the button triggers only the onchange code
But I need to know whether the button has been clicked:
<input type="text" onchange="alert('change')" value="Text">
<input type="button" onclick="alert('click')" value="Button">
What do I need to change to get the click handler?

That works fine, it's alert() that sucks.
I don't know the exact details around it, but I've noticed in the past that alert() can mess with DOM events in strange ways when those events would occur together.
<input type="text" onchange="console.log('change')" value="Text">
<input type="button" onclick="console.log('click')" value="Button">​
See here: http://jsfiddle.net/25EsQ/
(Make sure to bring up the JS console so you can see the output)
The good news is this is a debugging issue only (hopefully) and when you use real and useful JS code instead, it should work as you expect.

The alert comes up between the onmousedown and the onmouseup events, causing an onclick to never trigger

Jquery blur doesn't work in Firefox and Chrome but works in IE9

I have this HTML code which simulates a dropdown multi-checkbox
<div>
<div class="select">
<span>Select something</span>
</div>
<div class="no-display select-list">
<div>
<label class="unchecked" for="value1">
Value1
</label>
<label class="unchecked" for="value2">
Value2
</label>
</div>
</div>
</div>
And javascript:
$(".select").live("click", function () {
$(".select-list").toggleClass("no-display").focus();
});
$(".select-list").live("blur", function () {
$(this).addClass("no-display");
});
But in Firefox and Chrome, the blur event doesn't work, but works in IE9.
I want, when clicking outside select-list element, to close it (means make it invisible).
I used blur event after assigned focus on that element.
Could you show me the good approach to do that ?
Thanks

Try using on("focusout", instead of on("blur"),, because the blur event doesn't always get triggered.

Try trapping a click on the document to hide the menu. The clicks from the menu will also propagate to the document so you'll need a work around for that (you can check event.originalEvent for example).
Demo here

Set attribute tabindex=-1 on the select-list div(read about "tabindex" property).

Cannot enable XHTML submit input/button which is disabled by default

I have this simple button in XHTML:
<input type="submit" name="submit" value="Test" disabled="disabled" onmouseover="this.disabled=''" />
The problem is, no matter what I try, when I hover over the button, it won't re-enable from the disabled attribute it has. In XHTML, you are required to use disabled="disabled" which seems to completely break the option to enable/disable it with JavaScript. I've tried running this.disabled='', this.disabled=false, and even this.removeAttribute('disabled') but nothing seems to be capable of re-enabling the button. Weird thing is, if I remove the ='disabled' part of the attribute (making it invalid XHTML), the script enables the button just fine. Is this not possible without using invalid XHTML?
Note: I'd really prefer to only use JavaScript for this specific example, not jQuery.
I thought this would be something simple that would take like 5 seconds but apparently not.

Disabled elements for some reason do not seem to fire mouseover/out events along with click.
The following is not the best solution in the world, but you can wrap it in another element and use the wrapping element's mouseover event to enable it.
<div style="display:inline-block;padding:1px;" onmouseover="document.getElementById('submit').disabled=false">
<input type="submit" id="submit" name="submit" value="Test" disabled="disabled" />
</div>

disabled=false is correct.
The problem is that a disabled element doesn't receive events. See the question Javascript OnMouseOver and Out disable/re-enable item problem.