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>
Related
When setup like this, clicking on a label that has a child button triggers button's onclick event:
function fireButton() {
console.log("Button fired!");
}
<label>Label
<button onclick="fireButton()">Button</button>
</label>
is there a way to prevent this?
Add for attribute to label.
function fireButton() {
console.log("Button fired!");
}
<label for=''>Label
<button onclick="fireButton()">Button</button>
</label>
You can put the button outside the label
<label>Label</label>
<button onclick="fireButton()">Button</button>
You can add preventDefault for labels and keep the existing code:
document.querySelector("label").addEventListener("click", function(event) {
event.preventDefault();
}, false);
You could use a different tag e.g <span> rather than the label But if you really need to use the <label>, you should prevent the default behaviour of the label onclick() like so:
function fireButton(){
//add actions here
}
function preventDefault(event){
event.preventDefault()
}
<label onclick="preventDefault(event)">Label
<button onclick="fireButton()">Button</button>
</label>
Here's an approach in CSS which also disables triggering button's :active state when clicking on label. Overriding label's onClick event does not do that.
label {
pointer-events: none;
}
button {
pointer-events: initial;
}
Following is the code
(function(window){
var form = document.getElementById('form_element'),
form2 = document.getElementById('form_element2'),
container = document.getElementById('container');
window.addEventListener('mouseup', getAlert);
function getAlert(event) {
if(event.target === form) {
alert('I clicked on a form');
}
}
form2.addEventListener('click', function() {
container.innerHTML = '<h1>I am however working</h1>';
});
})(window);
#container {
height:400px;
width:400px;
background:red;
}
#form_element {
display:inline-block;
}
<form action="" id="form_element">
<input type="text" placeholder="Enter here..."/>
</form>
<form action="" id="form_element2">
<input type="text" placeholder="Enter here..."/>
</form>
<div id="container">
<h2>Something goes here</h2>
</div>
Could you help me with this, with some explanation? Does this differ in jquery selector?
I am stuck with such small situations. Could you please help me work it out.
Thanks
The problem is that the target when the mouse goes up is the input element and not the form
Here are some ways to solve your problem
Check if the target is the input element
window.addEventListener("mouseUp", getAlert);
function getAlert(event) {
if (event.target === form.firstElementChild) {
alert('I clicked on a form');
}
}
Add the listener to the form so that there is no need to check anything
form.addEventListener("mouseUp", getAlert);
function getAlert(event) {
alert('I clicked on a form');
}
Check if the target is the form OR if the target is an element of the form
window.addEventListener("mouseUp", getAlert);
function getAlert(event) {
if (event.target === form || form.contains(event.target)) {
alert('I clicked on a form');
}
}
Use CSS to add some padding to the form so you can have space to click the form without clicking the input
#form_element {
padding: 20px;
}
Use CSS to make the input element "invisible" to the mouse
#form_element>input {
pointer-events: none;
}
I have this code:
$(function() {
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
return false;
});
});
Which works great and shows the '.toggle4' div but I want to hide it again when clicking outside/away from it.
So I added this:
$(document).click(function() {
$(".toggle4").hide();
});
Which works but it hides the div even when I click inside of the '.toggle4' div (it's an input box for a search form).
Any ideas? Thanks.
That's because when you click inside of .toggle4 that click event bubbles up the DOM and triggers the event you bound to the document. You should be able to fix that with something like:
$('.toggle4').click(function(e){
e.stopPropagation()
})
One possibility is to prevent the click event from bubbling up to the document if it took place inside the toggle.
$(function() {
$('#searchField').click(function() {
$('#toggle').slideToggle('fast');
return false;
});
});
$(document).click(function() {
$("#toggle").hide();
});
$("#toggle").click(function(e) {
e.stopPropagation();
});
#toggle {
width: 100px;
height: 100px;
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchField">
<div id="toggle" class="toggle4"></div>
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/
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();
});
});