I need to hide a div with some content when a input is clicked, but when the input is focus by tab the content should be showed. Currently i can show and hide the div with the content but i can't handle well the focus when is clicked i have a bounce because is focus and clicked at the same time.
Here's my code
CodePen
$(function() {
$('.myinput').click(function(e) {
$('.text').addClass('hidden');
console.log("click");
});
$('.myinput').focus(function() {
$('.text').removeClass('hidden');
console.log("focus");
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<input class="myinput" type="text" />
<div class="text">
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
</div>
</div>
I added a variable to determine if the mouse is being pressed, and only hide the text content if it is. Results in mouse-focus text being hidden, tab-focus text is shown.
Also changed the click handler to a mousedown handler, the click event only fires after a mouse down + mouse up causing your flickering problem.
codepen
var mousedown = false;
$(function () {
$('.myinput').mousedown(function(e) {
mousedown = true;
$('.text').addClass('hidden');
console.log("click");
});
$('.myinput').focus(function() {
if(!mousedown) $('.text').removeClass('hidden');
console.log("focus");
});
});
$(window).mouseup(function(e){
mousedown = false;
})
Related
When I have focus on the input field and I click in any open area of the body, the body becomes the document.activeElement , Is there a way to prevent the body focus completely.
What I am looking for is :
To prevent focus the body and maintain focus on the input field.
To avoid the firing of the blur event on the input field.
I've tried adding tabindex=-1 but I believe its for Tab functionality and hence does not work in this case.
document.querySelector("#inpdontlosefocus")
.addEventListener("blur",function(){
const $log = document.querySelector("#log");
$log.innerText += "\r\nLost focus";
})
html,body {
width:100vw;
height: 100vh;
}
<body id="notokaytogetfocus">
<input id="inpdontlosefocus" type="" placeholder="dont lose focus to body">
<input id="inpokaytofocus" type="" placeholder="allow focus">
<div id="log"></div>
</body>
Here is a solution that will always keep the focus on input fields in your document:
you will be able to switch the focus between input fields.
if you clicked outside an element that is not input, it will get the lastest input blurred and will apply focus on it.
var blurred, focused;
const $log = document.querySelector("#log");
var els = document.querySelectorAll('input');
Array.prototype.forEach.call(els, function(el) {
el.addEventListener('focus', function() {
focused = this;
});
el.addEventListener('blur', function() {
$log.innerText += "\r\nLost focus;"
blurred = this;
});
});
document.addEventListener("click", function(e) {
e.preventDefault();
if (focused && focused.tagName == "INPUT") {
$log.innerText += "\r\nactiveElement= " + document.activeElement.id;
focused.focus();
} else if (blurred) blurred.focus();
})
html,
label {
width: 100%;
height: 100%;
}
<body id="notokaytogetfocus">
<input id="inpdontloosefocus" placeholder="dont loose focus to body">
<input id="inpokaytofocus" placeholder="allow focus">
<div id="log"></div>
</body>
I'd added more html elements for a more accurate demonstration, the logic here is if the event source in body is not focus-able then we set focus back to the input we want, other wise the its a focusable element thus will get the focus(e.g. button, link, input, ...); notice that click event is attached to body and clicking outside body won't have this behavior.
document.querySelector('.notokaytogetfocus').addEventListener("click",function (e){
if(e.target == document.activeElement){
console.log("focusable element");
}else{
console.log("not focusable element");
// we'll set foucs on desired input
document.querySelector("#inpdontlosefocus").focus()
}
})
.notokaytogetfocus{height: 100vh; width:100vw;}
<div class="notokaytogetfocus">
<input id="inpdontlosefocus" type="" placeholder="dont lose focus to body">
<input id="inpokaytofocus" type="" placeholder="allow focus">
<button>do!(focusable)</button>
<p>lorem ipsum</p>
<div>some text</div>
</div>
I have done
some html tags click event it's working by mouse click and
keyboard enter
some html tags click events are are not working when
press in keyboard enter. only working mouse click.
I need both are we excutue in single method
like: Button, Anchor
"Button **and Anchor**" - tags only suporting .
"p,div,span,h1"- tags are not suporting .
Button and Anchor Tag only working both mouse click and keyboard enter
!
remaining element are not working tab using keyboard enter why ?
dont't say keycode method for keyboard enter i need similar button and anchor tag
Here is the demo:
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was p.");
});
$("div").click(function(){
alert("The paragraph was div.");
});
$("span").click(function(){
alert("The paragraph was span.");
});
$("h1").click(function(){
alert("The paragraph was h1.");
});
$("button").click(function(){
alert("The paragraph was button.");
});
$("a").click(function(){
alert("The paragraph was a.");
});
});
* {
margin-bottom:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Button and Anchor Tag only working both mouse click and keyboard enter ! </h2>
<h2>remaining element are not working tab using keyboard enter ? </h2>
<br>
<br>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
Thanks
J.Jayaprakash
You could use the keypress event.
To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.
function alertTag( tag ){
alert("The element was " + $(tag).prop("tagName"));
}
$(document).ready(function() {
$("p, div, span, h1, button, a").click(function(e) {
alertTag(e.target);
}).keypress(function(e) {
if (e.which == 13) {
e.preventDefault(); // optionally
alertTag(e.target);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
If you want to use the same method for all the elements (while I don't see the point in doing so) you need to include e.preventDefault(). Otherwise, when pressing enter you will trigger both the click and the keypress events.
An alternative could be to force the p, div, span and h1 elements to trigger a click event when pressing enter on them:
$(document).ready(function() {
$("p, div, span, h1, button, a").click(function(e) {
alert("The element was " + $(e.target).prop("tagName"));
});
$("p, div, span, h1").keypress(function(e) {
if (e.which == 13) {
$(e.target).trigger('click');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
If you really want to do it for all the HTML tags (even when I think that's not a good idea) you can do the following.
$("body *").keypress(function(e) {
if (e.which == 13) {
$(e.target).trigger('click');
}
});
Then, all the elements will react to a enter like they do to a click. But you should really try to replace body * for a selector that covers just the elements that you want. For example, you can add the class .enterTriggersClick to the target elements and then do:
$(".enterTriggersClick").keypress(function(e) { ...
I have this component:
$chevron.on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
I am trying to click on an anchor ($chevron) and then display the element .disclaimer-wrapper but the document is not focusing or scrolling down to that element when it appears so the user can't see the new content being displayed.
What am I missing?
jQuery Focus does not work on divs, however there is a workaround to that, in simple words, you need to set the tab index of div to -1, like this:
$('#chevron').on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).attr("tabindex", -1).focus();
});
});
.disclaimer-wrapper {
display: none;
}
.disclaimer-wrapper:focus {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
click
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
here is a fiddle of it, you can check it out.
<body>
<div id="e1">Element X1</div>
<div id="e2">Element 2X</div>
<div id="e3">Element X3</div>
Hide
</body>
How can i hide the entire body And only show #e2 when i click on #hide, But if i clicked anywhere else out of #e2 again, the hide effect will stop and return to normal.
Something like this? NB: make sure to give your hide link a unique ID.
Showing/hiding works well with jQuery show and hide methods, but since you wanted the elements to stay in their place, it is more suitable to use the visibility style attribute:
$('#hide').click(function () {
// hide all in body except #e2, and #e2's parents.
$('body *').not($('#e2').parents().addBack()).css({visibility: 'hidden'});
return false; // cancel bubbling and default hyperlink effect.
});
$('#e2').click(function () { // click on #e2
return false; // cancel bubbling -- ignore click.
})
$(document).click(function (e) { // click on document
$('body *').css({visibility: 'visible'}); // show all in body.
});
div { border: 1px solid}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="e1">Element X1</div>
<div id="e2">Element 2X</div>
<div id="e3">Element X3</div>
Hide
Be aware that these div elements stretch across horizontally, so a click to the right of the text "Element 2X" will still be on #e2.
Something like this:
// Get reference to the hyperlink
var hideElem = document.getElementById("e4");
// Set up click event handler for link
hideElem.addEventListener("click", function(e){
var elems = document.querySelectorAll("body *:not(#e2)");
Array.prototype.slice.call(elems).forEach(function(value){
value.classList.add("hide");
});
e.stopPropagation();
});
// Set up click event handler for document
document.addEventListener("click", function(){
var elems = document.querySelectorAll("body *");
Array.prototype.slice.call(elems).forEach(function(value){
value.classList.remove("hide");
});
});
.hide { display:none; }
<div id="e1">Element X1</div>
<div id="e2">Element 2X</div>
<div id="e3">Element X3</div>
Hide
$('body').click(function(evt){
if(!$(evt.target).is('#e2')) {
//If not e2 is clicked then restore the state back of page by removing a specific class
}
});
You will need help of css class .hide {display:none;} and add and remove this class when e2 is clicked and remove this class when body is clicked but not e2 as provided above
I have a div main-wrap and an image in it.
I want to hide main-wrap when click on it. But when you click on image that is inside main-wrap I don't want to do anything. Right now I have this non-working code. When I click on image main-wrap still hides. (hidden is my class .hidden {display:none})
<div class="main-wrap" >
<div class="photo-wrap">
<img style="cursor:default;" onclick = "return false;" class="img img-responsive" src = "/stat_photo/1.jpg"/>
</div>
</div>
And I have this code
$(document).ready(function() {
$('.main-wrap').click(function(){$('.main-wrap').addClass('hidden')});
});
I ended up with this code
$('.main-wrap').on('click', function(e) {
$('.main-wrap').addClass('hidden');
}).on('click', 'img', function(e) {
// clicked on descendant div
e.stopPropagation();
});
which is taken from here
How to have click event ONLY fire on parent DIV, not children?
(the accepted answer didn't work though)
$('.main-wrap').click(function(e) {
$(this).addClass('hidden');
}).on('click', 'img', function(e) {
return false;
});
https://jsfiddle.net/bfwsqxko/1/
I added a click event, which extends with an exceptional click on image, which is set to return false;
Better add an id of the image. Then replace .img with #yourid
$(document).ready(function() {
$('.main-wrap').not('.img').click(function(){$('.main-wrap').addClass('hidden')});
});