How to handle click event in mouse and keyboard? - javascript

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) { ...

Related

How do I prevent parent event handler on a child node?

I have a div and it's listend by a event handler:
$('.thediv').click(function() {
$(this).remove()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;height:500px">
<input type="input" style="width:100px;height:20px" />
</div>
The div would be removed if it's clicked.
However, I want to put a text input box on the div and if the user clicks the text input, the div should not be removed. Only when the user clicks the area outside the input box, the div get removed.
What can I do?
Only remove if the target of the event does not match input:
$('.thediv').click(function(e) {
if (!e.target.matches('input')) {
$(this).remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thediv" style="width:500px;height:500px">
other div content
<input style="width:100px;height:20px">
</div>
on input click use .stopPropagation() this will prevent from call the parent click
$('.thediv').click(function(){$(this).remove()});
$('#input').click(function(e) {
e.stopPropagation();
});
<div class="thediv" style="">
<input type="input" id="input" /><br />
text here
<h1>text here </h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In the following demo:
.box is the parent element that listens for the click event.
.box is also referred to as event.currentTarget because it is registered to the click event.
.box is also considered this within the callback function.
The event.target is the origin of the event -- the element that the user clicked.
.box has an <input> child element.
The callback function simply states this:
if the clicked element (aka event.target -- see #4)
is this (aka .box -- see #3), then...
remove this
Note: This will exclude anything within .box that is clicked not just an <input>.
Demo
$('.box').click(function(event) {
if (this === event.target) {
$(this).remove();
}
});
<fieldset class='box' style="width:500px;height:500px">
<input type="text" style="width:100px;height:20px">
</fieldset>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Check when an element has been selected/tabbed onto

I have an HTML page where I have a few divs with contenteditable="true". I also set the tabindex sequentially so when the user hits tab he or she will go through all of the editable divs. However, right now I have "Insert notes here" written inside each of the divs (see below).
<div contenteditable="true" tabindex='1'>Insert notes here<div>
<div contenteditable="true" tabindex='2'>Insert notes here<div>
<div contenteditable="true" tabindex='3'>Insert notes here<div>
I'm trying to get rid of the "Insert notes here" text when the user tabs to the div. Right now, I'm able to get rid of the text if they click on it with the following jQuery:
function selectText(containerid) {
if(document.getElementById(containerid).innerHTML == "Insert notes here") {
document.getElementById(containerid).innerHTML = "";
}
}
Is there a way to achieve the same effect but also when the user uses tab?
sounds like you are looking for the onfocus event
http://www.w3schools.com/jsref/event_onfocus.asp
In jquery:
$("#fieldId").focus(function() {
//your code here
});
Try this working snippet
$(document).on('keyup, focus', '.editor', function(e) {
this.innerHTML = "";
//detect 'tab' key
if (e.keyCode == 9) {
//add tab
this.innerHTML = "";
//prevent focusing on next element
e.preventDefault()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="editor" tabindex='1'>1
</div>
<div contenteditable="true" class="editor" tabindex='2'>2
</div>
<div contenteditable="true" class="editor" tabindex='3'>3
</div>

How to handle focus in click and tab?

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;
})

jquery first click is not working, further clicks works

Here is my code jquery code... first time click not working, further clicks works and also in iphone safari nothing happening. Do we need to add anything specific to safari browser. Any help will be appreciated.
CSS
p.expand-one {
cursor: pointer;
}
p.content-one {
display:none;
}
p.expand-2 {
cursor: pointer;
}
p.content-2 {
display:none;
}
HTML
<div class="sitesection">
<p class="expand-one" onclick="dostuff('.expand-one','.content-one');" > + Click Here To Display The Content </p>
<p class="content-one"> This is the content that was hidden before, but now is... Well, visible!"</p>
<p class="content-one"> This is the content that was hidden before, but now is... "</p>
<p class="expand-2" onclick="dostuff('.expand-2','.content-2');"> + Click Here To Display The Content </p>
<p class="content-2"> This is the content that was hidden before, but now is... Well, visible!"</p>
<p class="content-2"> This is the content that was hidden before, but now is... "</p>
</div>
SCRIPT
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script>
function dostuff(classname1, classname2) {
$(classname1).unbind().click( function(){
$(classname2).slideToggle('fast');
$(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
});
}
</script>
Thanks..
It's because you only add the click() event handler after the first call to your doStuff() function. Remove the click() call.
function dostuff(classname1, classname2) {
$(classname2).slideToggle('fast');
$(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
}
Or better yet, remove the ugly and outdated on* event attributes and attach your events using unobtrusive Javascript. As you're already using jQuery, here's how you do that:
<div class="sitesection">
<p class="expand"> + Click Here To Display The Content </p>
<p class="content"> This is the content that was hidden before, but now is... Well, visible!"</p>
<p class="content"> This is the content that was hidden before, but now is... "</p>
<p class="expand"> + Click Here To Display The Content </p>
<p class="content"> This is the content that was hidden before, but now is... Well, visible!"</p>
<p class="content"> This is the content that was hidden before, but now is... "</p>
</div>
$(function() {
$('.expand').click(function() {
$(this).nextUntil('.expand').slideToggle('fast');
$(this).text(function(i, text) {
return text.trim().charAt(0) == '-' ? '+ Click Here To Display The Content' : '- Click Here To Display The Content';
});
});
});
Working example

Enable/disable button on contentEditable keyup

I have a couple of divs on my website that utilize the HTML5 contentEditable attribute. The goal is for the user to be able to start writing a journal entry, and have the save button change from disabled to enabled.
Here's the HTML I have so far:
<div id="entry-create-partial">
<div id="title-create-partial" name="title" contenteditable="true" data-placeholder='Title it' style="color:black"></div>
<div id="content-create-partial" name="content" contenteditable="true" style="color:gray">Write anything</div>
<button type="button" id="create-entry" class="btn" disabled="true">Save</button>
</div>
And here's the jQuery:
$(document).ready(function(){
$('#title-create-partial').keyup(function(){
if ($(this).value == '') {
$('#create-entry').attr('disabled', 'disabled');
} else {
$('#create-entry').attr('disabled', false);
}
});
});
While this does work, it only checks on the first keyup; if the user backspaces and deletes everything they typed, the button doesn't disable itself again. Does anyone know why?
It's a <div> element not an <input>, so use text() instead of val() (and be sure to trim so it isn't enabled on whitespace). Also could use prop() to set the property instead of attr().
$('#title-create-partial').keyup(function(){
if ($.trim($(this).text()) === '') {
$('#create-entry').prop('disabled', true);
} else {
$('#create-entry').prop('disabled', false);
}
});
jsFiddle here.

Categories