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>
Related
How to set focus and slide down to the html when button is clicked . How to slide to particular HTML element using javascript?
p:focus, p:active {
color: green;
}
p {
min-height: 250px;
}
<body>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p id="myAnchor">Click the buttons to give focus and/or remove focus from the link above.</p>
<script>
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
</script>
</body>
Adding tabindex="0" to p#myAnchor solves the issue
tabindex="0" means that the element should be focusable in sequential
keyboard navigation, after any positive tabindex values and its order
is defined by the document's source order.
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
p:focus,
p:active {
color: green;
}
p {
min-height: 200px;
}
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p tabindex="0" id="myAnchor">Click the buttons to give focus and/or remove focus from the link above.</p>
If by get focus you mean get there:
function getfocus() {
document.getElementById("myAnchor").scrollIntoView();
}
and if by loose focus if you mean going back to the top:
function looseFocus(){
window.scrollTo(0, 0);
}
but <p> is not focusable.
If you really want focus you need an anchor <p><a id="myAnchor" href="#">Click the buttons to give focus and/or remove focus from the link above.</a></p>
i have a color picker thats displayed on a page, if you click it,it drops down the colors for you to select.
But what i want to do is that i want to hide the color picker and only when a button is clicked i want it to automatically click the color picker so that the drop down colors is shown instead of me clicking on the color picker
<button click.delegate="test">Select a Color</button>
<input type="color" id="color"></input>
this is what i tried
<input type="color" id="color" style="display:none"></input>
test() {
let color = document.getElementById("color")
color.style.display = "block";
if (color instanceof HTMLElement) {
color.click();
}
}
but the above doesnt work, it doesnt invoke a click to dropdown the color gradients
so basically when the button is clicked this is what it should look like
Try this
function showColorPickerFunc() {
let el = document.getElementById("color")
if (el.onclick) {
el.onclick();
} else if (el.click) {
el.click();
}
}
showColorPickerFunc();
#color{
width: 0px;
opacity: 0;
}
<button onclick="showColorPickerFunc()">Select a Color</button>
<input type="color" id="color" />
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 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]);
I have three buttons, and want to change the color of the button on being selected. As you will see, I am able to change the color on selection, but I need buttonA to return to its original color when buttonB is selected (at which point buttonB should take on the selected color) and so on. Currently each button selected takes on the selected color, but buttons do not return to their original color.
Please see this fiddle: http://jsfiddle.net/Fwqv8/
This is the script:
jQuery(document).ready(function(){
jQuery('button.account').click(function() {
jQuery(this).removeClass("account");
jQuery(this).addClass("btn-success");
});
});
Ideally there will be a default button (buttonA) which has the selected color when the page loads initially.
Help would be greatly appreciated. Thank you.
You could remove the btn-success class on all buttons in the onclick function, then add the class only to the newly selected
jQuery(document).ready(function(){
jQuery('button.account').click(function() {
jQuery('button.btn-success').removeClass('btn-success');
jQuery(this).removeClass("account");
jQuery(this).addClass("btn-success");
});
});
Or you could have an array with the currently selected buttons, and removing the btn-success class on a newly clicked button
http://jsfiddle.net/Fwqv8/3/
jQuery(function(){
var $acctButtons = jQuery(".account");
jQuery('button.account').click(function() {
$acctButtons.removeClass("btn-success");
jQuery(this).addClass("btn-success");
});
});
YOU CAN USE TOGGLECLASS FOR SINGLE BUTTON
LIVE DEMO
You can use:
jQuery(document).ready(function(){
jQuery('button.account').click(function(){
var that = this;
jQuery('button.account').each(function(i, btn){
jQuery(this).addClass("btn-danger");
jQuery(this).removeClass("btn-success");
});
jQuery(that).addClass("btn-success");
});
});
This code does all your buttons switch back to their default state on click. Only the clicked button will stay (in your case) "green".
An default button can easily been done by setting the default class in your markup.
JS
jQuery(document).ready(function() {
$('.btn').click(function() {
$('.btn').removeClass("btnSelected");
$(this).addClass("btnSelected");
})
});
CSS
.btn{
width:100px;
height:20px;
display:inline-block;
background-color:red;
}
.btnSelected{
background-color:green;
}
HTML
<div id="btn1" class="btn">Button 1</div>
<div id="btn2" class="btn">Button 2</div>
<div id="btn3" class="btn">Button 3</div>
Try # codebins