I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/
Related
<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".
As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>
You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);
You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>
With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});
Haai. I have a problem. How to I hide this button when I click outside of <input type="search">. The button show when I click <input type="search">but I don't know how to hide the button when we click outside the <input type="search">. Any idea?
HTML
<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>
Jquery
$("input[type='search']").click(function() {
$(".search_btn").addClass("search_on");
});
$("*:not('input[type='search']')").click(function() {
$(".search_btn").removeClass("search_on");
});
You're looking for the blur event.
When you click on the input, it receives focus, when you leave (by clicking, keyboard interaction, etc.) it loses focus and triggers blur. So:
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
})
It might also be a good idea to use the focus event instead of click on Line 1 so that users can also tab into the field and have it work correctly:
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
});
See also:
https://api.jquery.com/focus/
https://api.jquery.com/blur/
Most likely what you want can be accomplished with the focus and blur events.
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
});
$("input[type='search']").blur(function() {
setTimeout(function () {
$(".search_btn").removeClass("search_on");
}, 50);
});
You'll need a timeout to allow the button to still be clicked, since clicking the button will cause the input to be blurred.
UseremoveClass
$(document).on('click', function(event) {
if (event.target.id !== 'submitButton' && event.target.id !== "search") {
$(".search_btn").removeClass("search_on");
}
})
$("input[type='search']").on({
click: function() {
$(".search_btn").addClass("search_on");
}
});
$("#submitButton").click(function() {
console.log($("#search").val())
})
.search_btn {
display: none
}
.search_on {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="search">
<button type="submit" id="submitButton" class="search_btn" name="button">Search</button>
using event focus and blur:
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
});
You can use focus and blur events. When control is inside the textbox, focus event is called. When control leaves the textbox, blur event is called.
$(document).ready(function() {
$("input[type='search']").focus(function() {
$("button[type='submit'].search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$("button[type='submit'].search_btn").removeClass("search_on");
});
});
.search_on { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>
I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>
Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance
Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});
What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});
I am clicking to set focus on a textbox, and once I have set focus I am trying to display a simple message. Then on blur that message disappears.
Here is my code: If I click on the textbox it displays the message but if I click the button it doesn't set focus as I thought it would.
<script>
$(document).ready(function(){
$("#clicker").click(function(){
$("#T1").focus(function(){
$("#myFocus").show();
});
});
$("#T1").blur(function(){
$("#myFocus").hide();
});
});
</script>
<body>
<div id="clicker" style="cursor:pointer; border:1px solid black; width:70px;">
Click here!
</div>
<br /><br />
<input id="T1" name="Textbox" type="text" />
<div id="myFocus" style="display: none;">focused!</div>
You need to trigger the focus event, instead of defining it. Try this instead:
<script>
$(function() { // Shorthand for $(document).ready(function() {
$('#clicker').click(function() {
$('#T1').focus(); // Trigger focus
});
$('#T1').focus(function() { // Define focus handler
$('#myFocus').show();
}).blur(function() {
$('#myFocus').hide();
});
});
</script>
The problem is here:
$("#T1").focus(function(){
$("#myFocus").show();
});
You should trigger the event with focus() not attach a callback with focus(function(){...}
Fixed code:
$(document).ready(function(){
$("#clicker").click(function(){
$('#T1').focus();
});
$("#T1").blur(function(){
$("#myFocus").hide();
}) .focus(funcion(){
$("#myFocus").show();
});
});