I wan't to simulate a click with a key when the button is focused/active. So, if I move with tab between the buttons and press key "A", the onclick methos should be called. Bellow is my sample code.
Regards!
<script type="text/javascript">
$(document).activeElement(function(e){
if(e.which == 13){
//perform click on a button
}
});
</script>
<button type="button" onclick="alert('you clicked button 1')">button 1 </button>
<button type="button" onclick="alert('you clicked button 2')" >button 2 </button>
Try this:
$('body').on("keydown", "button", function(e) {
if (e.keyCode == 65)
{
$(this).trigger("click");
}
});
Fiddle
You may change the selector for whatever you want, like a class to all elements with the desired behaviour.
To fire events over an element, run the following code template:
element.fire(eventName[, memo]);
Related
how do I make button that when mouse over the button, the text on the button becomes red.
When the mouse left the button, the button text resumes the original color using mouseover and mouseout events.
here is the event for the button
< button id="Button" onclick="test()" > enter
This could easily be done with css however per your question here is how you would accomplish this:
<button id="button" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="test()" >Enter</button>
<script>
function mouseOver() {
document.getElementById("button").style.color = "red";
}
function mouseOut() {
document.getElementById("button").style.color = "black";
}
</script>
I have this simple jQuery script that asks to confirm action when you click on a link. And it works great when it's a normal a href link, but I have onclick script assigned to the button and it does not prevent it from firing. I need it to prevent it only once. How can I achieve that?
$(".mybutton").one('click', function() {
event.preventDefault();
$(this).html("Are you sure?");
});
function test() {
$(".forthebutton").html("button click function worked");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mybutton" onclick="test();">Button</button>
<br /><br /><br />
<span class="forthebutton">button click should change this text</span>
You need to remove original onclick and give it back in this case because you can't influent on onclick handler.
const btn = $(".mybutton");
const onclick = btn.prop('onclick'); // save onclick fn
btn.prop('onclick', null); // remove onclick from button
btn.one('click', function() {
$(this).html("Are you sure?");
btn.on('click', onclick); // add onclick back to button
});
function test() {
$(".forthebutton").html("button click function worked");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mybutton" onclick="test();">Button</button>
<br /><br /><br />
<span class="forthebutton">button click should change this text</span>
The focus event works fine on all browsers but Safari when it has been clicked.
And it works fine on div[tabindex] element, but don't work on button or input:button element.
It also can get the focus event when I use $('.btn').focus().
Why does the focus event haven't triggered on click ?
Here is my code:
$(".btn").focus(function (e) {
$(".result").append("<p>Event:"+e.type+", target:"+e.target+"</p>");
})
.result{min-height:200px;border:1px solid #000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn">button 1</button>
<input type="button" class="btn" value="button 2"/>
<div class="btn" tabindex="0">div element</div>
<h1>
Result:
</h1>
<div class="result">
</div>
Documentation tells is not supported: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
Why does the focus event haven't triggered on click ?
We found through research that Safari and FireFox on Macs do not set focus on buttons when you click on them.
The way we fixed that was to add a click listener to our buttons and call focus() on the button that was clicked.
In Angular it looked like this:
<button (click)="myClickFunction(); $event.target.focus();>My Button</button>
See https://bugs.webkit.org/show_bug.cgi?id=13724
This is working as intended on MacOS. Clicking a button, radio button, or checkbox doesn't give the element focus- thus it can't lose focus and trigger a blur.
The solution is to give it a click event that gives the element focus.
Use the code below to fix all the buttons on a web page:
(function() {
var buttons = document.querySelectorAll("button");
for (var i=0; i<=buttons.length-1; i++) {
(function(index) {
var button = buttons[index];
button.addEventListener("click", function() { button.focus(); });
})(i);
}
})();
Angular 8+ solution:
in your button tag
add #toggleButton and (click)="onClick(); $event.stopPropagation()"
exp:
<button #toggleButton type="button"
(click)="onClick(); $event.stopPropagation()"></button>
in your component.ts add
==>before constructor
*** #ViewChild('toggleButton', { static: true }) toggleButton: ElementRef;
onclick(){
this.toggleButton.nativeElement.focus();
}
This might fix the issue: https://stackoverflow.com/a/1269767/2731261
$(".btn").mouseup(function(e){
e.preventDefault();
});
I am have a button like this:
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="javascript:void(0)" disabled>Resign</a>
If ajax response success it adds disabled to this button.
Here I need to this button has disabled on click event. If it has, need to alert different message, or if it hasn't I need to alert different message.
This is how I tried it.
$(document).on('click', 'a.employee', function(e){
var empID = $(this).data('emp_id');
if($(this).is(':disabled')) {
alert('message1');
} else {
alert('message2');
}
});
Also tried it something like this:
$(document).on('click', 'a.employee:not(:disabled)', function(e){
var empID = $(this).data('emp_id');
alert('here');
});
But, both are not working for me..
Hope somebody may help me out.
Thank you.
You cannot disable an anchor element, and adding a disabled attribute to it would mean that your HTML is invalid.
To solve this you could simply add a class to the element and key the click behaviour on that. Try this:
$(document).on('click', 'a.employee', function(e) {
e.preventDefault();
var empID = $(this).data('emp_id');
if ($(this).hasClass('disabled')) {
console.log('message1');
} else {
console.log('message2');
}
});
.disabled {
color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-sm btn-danger employee disabled" data-emp_id="23" href="#">Disabled</a>
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="#">Not disabled</a>
Also note the use of preventDefault() instead of adding javascript: to the href attribute of the a element.
Disabled is not an attribute and hence not a property of anchor tag
try this way
$(document).on('click', 'a.employee[disabled])', function(e){
var empID = $(this).data('emp_id');
alert('here');
});
I use this code which opens and closes a menu. How can I have it close when someone clicks anyplace on the screen?
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
The HTML
<div style="float:left;">
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Monitoring</span></a>
<ul id="v-menu" class="v-menu" style="display:none;" >
<li>Start</li>
<li>Stop</li>
</div>
You will need to do two things to achieve this:
Bind a click event for the whole document, and hide the menu if it is shown.
document.addEventListener("click", function(event) {
var menu = document.getElementById('v-menu');
if (event.target !== menu && menu.style.display == 'block')
menu.style.display = "none";
});
Stop the click event propagation when the menu is clicked, so the event does not bubble up to the document.
<a href="javascript:void(0)" class="button"
onclick="showElement('v-menu'); event.stopPropagation()">
See this in action: http://jsfiddle.net/william/Pfv8N/.
You can attach an event on document.body and in the handler you can write your code to
hide the menu like this
document.body.addEventListener("click", function(){
//conditions to check if click is not on ur menu
showElement();
}, false);