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>
Related
I can't find a solution for this in anywhere. Can someone help me ?
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123';NowCauseTheEvent,Plz !">
change
</div>
Basically I need to know how to programatically raise the event input after I change the value programatically as well. (something to place on the "NowCauseTheEvent,Plz" after the document.getElementById('myText').value='123'
ty !
BTW, this is not about custom event, but native event and I will REALLY appreciate to stop to vote for close this one because THIS IS NOT A CUSTOM EVENT !!!!
This will work across browsers and trigger the event you require.
<div onclick="document.getElementById('myText').value='123';document.getElementById('myText').oninput()">
change
</div>
Use the following in your placeholder:
document.getElementById('myText').oninput()
This works for me on Firefox and Chrome but fails on IE11.
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123'; document.getElementById('myText').dispatchEvent(new Event('input'));">
change
</div>
This is the js code:
$(document).ready(function() {
$("#test1 ,#test2").blur(function() {
alert("Blur of text box");
});
$("#buttonClick").click(function() {
alert("Button clicked");
});
});
HTML code:
<input type="text" name="test1" id="test1">
<input type="text" name="test2" id="test2">
<input type="button" value="Click" id="buttonClick">
Here the blur event & click event working fine separately but when the not in conjunction
what I mean is ex: if I write something in text box and click on button then
blur event gets called but the click not triggers
Any idea why this is happening, and what could be the solution for this?
Thanks in advance!
alert() pauses the execution of the rest of your script until the alert pop-up is closed. Use console.log() instead.
Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result
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>
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).