If you focus the input then try to click anywhere else the link is gone, good.
But if you focus the input then try to click on the link is gone, but the link didn't work. That's not what I want, I want to be redirected. I have no idea how to achieve this.
document.querySelector('input').addEventListener('blur', () => document.querySelector('a').style.display = 'none')
<input type="text"/>
link
The issue here has nothing to do with the blur event. It's simply a matter of handling click events and based on the source of the click, handling it the right way.
(I've removed the target=_blank code and changed the links to example.com just so the example will work here in the Stack Overflow snippet environment.)
// Get a reference to the search items container
const items = document.querySelector(".searchItems");
// All clicks within the document will bubble here
document.addEventListener('click', function(event){
// Depending on what the source of the click was,
// do the appropriate thing
if(event.target.classList.contains("search")){
// The input was the source of the click
items.classList.remove("hidden"); // Unhide the search items
} else if(!event.target.classList.contains("item")){
// Something other than the input or a link was clicked
items.classList.add("hidden"); // Hide the search items
}
});
.hidden { display:none; }
<input type="text" class="search">
<div class="searchItems hidden">
link<br>
link<br>
link<br>
link<br>
</div>
Related
I have a Side Filter, where a User can fill out some information and filter a Webpage.
I want this menu to appear when clicking a button and disappear when I click outside of it. This is what I currently have to make the Filter disappear once the user clicks outside of it:
$(window).click(function(e) {
if ((!$(e.target).hasClass("filterOverlay")) && (!$(e.target).hasClass("toggleFilterButton"))) {
$('.filterOverlay').hide();
$('.darkBackground').hide();
}
});
This works. However only if the Filter is empty. Because the fun thing is, when I add an Input-Field and click it. Of course Jquery doesn't recognize it as being the Filter and closes it.
What's the best way to go with such a thing? All I find is the solution above, but as pointed out, this doesn't really fit.
Use jQuery blur() Method for when clicking outside of an input.
The blur event occurs when an element loses focus.
CSS
.filter-div {
display: none;
}
HTML
<button type="button" class="btn btn-primary" id="toggleFilter">Filter</button>
<div class="filter-div">
<input type="text" class="form-control" id="filter" placeholder="Filter">
</div>
JS
$('#toggleFilter').on('click', function() {
$('.filter-div').slideToggle();
if ($('.filter-div').css('display') != 'none') {
$('#filter').focus();
}
});
$('#filter').on('blur', function() {
$('.filter-div').slideToggle();
});
Check it out:
JsFiddle
I have a text input that when I type in, people profiles come up that I can click and it is supposed to take me to their profile. The problem is that when I click on one of the people profiles from the results, it does not take me to their profile, it just ignores it because I set the result list to disappear on "blur" with the text input. Note that it DOES work (takes me to person's profile) if I remove the jquery that hides result list on text input blur. How come it is acting as if I am just clicking through the result link?
$(document).on('blur', '#student_search_b', function()
{
$("#student_search_results").hide();
});
.
<li id="student-search-bar">
<form action="" method="post">
<input type="text" id="student_search_b" name="student_search" class="form-control" placeholder="Search" autocomplete="off">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</form>
</li>
<!-- SEARCH RESULTS ARE STORED HERE -->
<div id="student_search_results"></div>
The blur event of the text box is fired first and hides the results pane before the click event on the link has a chance to fire.
If you absolutely want to keep the code in the blur event handler, you could delay its effect to give a chance to the click event on the link:
$('#student_search_b').blur(function () {
setTimeout(function () { $("#student_search_results").hide(); }, 250);
});
A better solution would be to remove the blur event handler, and to hide the results pane in the click event handler of the div, which is processed after the click on one of its link controls:
$('#student_search_results').click(function () {
$("#student_search_results").hide();
});
I'm attempting to prevent a user from clicking a link and it going to another page while any input is focused. Sometimes the only available space around the input and the keyboard is a link and some users click the link accidentally. I'm trying to make it so when they click the link it blurs the input (closes the keyboard) and prevents the page from following the link. Then let them click the link again if they want to go to another page after the input is no longer in focus.
html
<input type="text">
Example
I've tried the following...
jQuery
$('a').on('click', function (event) {
if ($('input').is(":focus")) {
console.log('focused');
event.preventDefault();
}
});
(nothing gets logged)
Also tried this...
if ($('input').is(":focus")) {
$('a').on('click', function (event) {
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
});
}
Neither one prevent the page from going to whatever link was clicked...
I don't think you can do this. You can disable the click event on the links while input is focused, and enable it back again when blur occurs on the input elements. However, while if user clicks on a link while focused on the input element blur event will occur first (which would enable clicking) then click even occurs and links acts as normal.
You could try disabling the links while input elements have focus, then you can enable them on the first click and restore normal operation.
$("input").on("focus", function() {
$("a").on("click", function (event) {
event.preventDefault();
$("a").off();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
example
I think I found a solution.
HTML
Example.com
jQuery
$('input').on('focus', function () {
$('a').each(function(){
$(this).addClass('cant-click');
});
});
$(document).on('touchend', function (e) {
if (!$(e.target).closest('input').length) {
$('a').each(function(){
$(this).removeClass('cant-click');
});
}
});
CSS
a.cant-click { pointer-events: none; }
When the input takes focus, every link gets this class. When anything on the page is clicked that is not an input, it removes this class from every link.
I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?
I'm building a web application and am learning as I go.
This is the first question that I am posting.
I have created a series of SPAN elements ,that behave like buttons.
After I click an element (the Orange one), I want to effectively disable it by changing its class (and hence its colour to Grey).
Firebug before .on("click):
<span class="sample_but3 sample_butOrange">3</span>
Firebug after .on("click"):
<span class="sample_but3 sample_butGrey">3</span>
I can see, using firebug, that the class ".sample_butOrange" is removed and the class ".sample_butGrey" is added exactly as I expect.
But its the next bit that has got me stumped.
Now if I click the Grey button (which was originally Orange) I'm still get alerted that I pressed the Orange button, instead of being alerted that I pressed the Grey one.
NOTE: I have put in alerts that notify which button is pressed.
Can someone explain to me what is happening?
Here is the full code as an example:
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample_button.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
// Grey button means do nothing.
function sample_processGrey() {
alert("You pressed the grey button. Don't do anything as this button is disabled.");
}
function sample_processOrange() {
alert("You pressed the orange button");
$(".sample_but3").addClass("sample_butGrey").removeClass("sample_butOrange");
}
$(document).ready(function () {
// Do something when the buttons are pressed.
$(".sample_butGrey").on("click", sample_processGrey);
$(".sample_butOrange").on("click", sample_processOrange);
});
</script>
</head>
<body>
<span class="sample_but1 sample_butPurple">1</span>
<span class="sample_but2 sample_butGreen">2</span>
<span class="sample_but3 sample_butOrange">3</span>
<span class="sample_but4 sample_butRed">4</span>
<span class="sample_but5 sample_butBlue">5</span>
</body>
</html>
You can't attach events to elements that don't exist yet. But you can attach events to parent elements that do exist, and then look for the child target. jQuery makes this easy with event delegation. Here is an example:
$("body").on("click", ".sample_butGrey", sample_processGrey);
This tells jQuery to attach an event to the body tag, and to look for an element with the class sample_butGrey when clicked. If found call the sample_processGrey method. Here is a working example:
http://jsfiddle.net/AyQq8/4/
The onClick event is place on the JQuery element selected when the DOM is ready.
If you need to change the click event, you could add it to the target button in the same time to change the button class.
I hope it may help you to understand this issue.
Have a nice day
Check this
function sample_processGrey() {
alert("You pressed the grey button. Don't do anything as this button is disabled.");
}
function sample_processOrange() {
alert("You pressed the orange button");
$(".sample_but3").addClass("sample_butGrey").removeClass("sample_butOrange");
}
// Do something when the buttons are pressed.
$(".sample_butGrey").on("click", sample_processGrey);
$(".sample_butOrange").on("click", sample_processOrange);
DEMO
Have you tried using .hasClass() to determine the current class? Or have you tried fetching the class to determine what it is before choosing a dynamic response with elm.attr('class') ? You can also use .find() to find the new class added in the content of the container and re-select it again like: $('body').find('.sample_butGrey').on('click', function(){ /* New gray was clicked */ }) If it doesn't exist, clearly it's not there, so you can run a fail response or something else.