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>
Related
On clicking a button, I want an input element to get focus. When the input element looses focus, I want the button to receive focus. Here is a simple example.
<body>
<button id="b1"
onclick="document.getElementById('i1').focus();">1</button>
<input id="i1" type="text"
onblur="document.getElementById('b1').focus();"/>
<button id="b2"
onclick="document.getElementById('i2').focus();">2</button>
<input id="i2" type="text"
onblur="document.getElementById('b2').focus();"/>
</body>
When I click any of the buttons, the input element gets focus. This works as desired. When I leave any of the two inputs by clicking on the canvas, the focus does not go to the button. This is my main issue.
When I leave the first input with tab, all browsers pass the focus to the first button. But when I leave the second button with tab, only firefox passes the focus to the second button. Chrome and opera don't show a focus. I am puzzled as to why the second button is treated differently.
You don't need to use JavaScript. HTML and CSS is enough. Use label tag and convert it's look like button. :)
label.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 1px 6px;
border:1px solid
}
<label class="btn" for="i1" id="b1">1</label>
<input id="i1" type="text"/>
<label class="btn" for="i2" id="b2">2</label>
<input id="i2" type="text" />
If you add a :focus style in your CSS, you can see it works fine. I've moved your JS out of the HTML markup for visibility and added some listeners for keyboard users.
Caution: Forcing focus back to the button interferes with the page's natural flow, so I probably wouldn't advise unless you have it attached to some input validation that fires when needed; else, how do keyboard users move to the next element?
const inputOne = document.getElementById('i1');
const btnOne = document.getElementById('b1');
const inputTwo = document.getElementById('i2');
const btnTwo = document.getElementById('b2');
// Listen for click to button one
btnOne.addEventListener('click', function() {
inputOne.focus();
})
// Make sure we listen for keyboard users
btnOne.addEventListener('keydown', function(event) {
if(event.keyCode === 90) {
inputOne.focus();
}
})
// Leaving input one
inputOne.addEventListener('blur', function() {
btnOne.focus();
})
// Listen for click to button two
btnTwo.addEventListener('click', function() {
inputTwo.focus();
})
// Make sure we listen for keyboard users
btnTwo.addEventListener('keydown', function(event) {
if(event.keyCode === 90) {
inputTwo.focus();
}
})
// Leaving input two
inputTwo.addEventListener('blur', function() {
btnTwo.focus();
})
:focus {
border: 1px solid red;
}
<button id="b1">1</button>
<input id="i1" type="text"/>
<button id="b2">2</button>
<input id="i2" type="text" />
I'm trying to make a button with an image that will toggle a div's class, however, when I use the tag image inside the button, the js won't work. This only happens on chrome, the same code works normally on firefox. Is there any solution to this?
codepen: https://codepen.io/luansergiomattos/pen/zydWyM
html:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
js:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
edit: this is what the code is supossed to do: when i press the button, the js will toggle a class, the class named "off" has width: 0px; display: none etc. So the element will be hidden when i press the button, and it will show up again when i press the button. Sorry for any english mistak
The reason this happens is the image becomes the target in your click function – try disable pointer events and it will work again :)
button img { pointer-events: none; }
I have a few buttons on my page and onclick they show or hide a few <div> elements.
The <div> elements are positioned towards the bottom of the page so scrolling to those <div> elements is necessary.
Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?
Here is one of the buttons:
<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>
Here is the <div> that appears when the button above is clicked:
<div class="row">
<div id="Section-1" class="col-md-10">
<p>The section to appear.</p>
</div>
</div>
Here is the JavaScript:
$("#Button-1").click(function () {
$("#Section-2").hide();
$("#Section-3").hide();
$("#Section-1").toggle("show");
$("#Button-1").text(function(i, text) {
return text === "View Details" ? "Hide Details" : "View Details";
});
return false;
});
Here is my research:
Article 1
Any help would be appreciated.
UPDATE
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.
Firstly mention the element correctly in the title. Its a a not button.
Next: The # in your a tag will by default take you to the top of the page when you click on it.
Use a javascript:void() in the href attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a>
</div>
This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv" jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:
$('.button').click(function() {
$('#lastclicked').text(this.textContent);
});
$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
e.preventDefault();
$('#lastclicked').text(this.textContent);
});
// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.
body {
height: 5000px;
padding: 50px;
}
.buttons {
position: fixed;
bottom: 0;
}
.button, .button-x {
display: inline-block;
padding: 20px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
Link with href="#"
Link with href="#mydiv"
Link with href="#", but a preventDefault.
</div>
<div id="mydiv">
Last clicked: <span id="lastclicked"></span>
</div>
The important part is the e.preventDefault(), which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.
General fix
Don't use <a>-Tags for your buttons. Convert the <a>-Tags to <button>-Tags or something else (span, p, etc.)
Explanation
That is pretty simple. Your <a>-Tags (namely the buttons) link to '#' which is the so called fragment part of an URI.
Usually fragments are HTML tags which are identified by a name (pre-HTML5)
<a name="top">This is the top section</a>
Jump to top
or an id (HTML5)
<div id="my-section">Coming soon</div>
Jump to my-section
Because you didn't specify the fragment or didn't use correct one the browser will scroll to the top of the page.
Have you tried this solution from http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor
You can use this function on your anchor:
function goToAnchor(anchor) {
var loc = document.location.toString().split('#')[0];
document.location = loc + '#' + anchor;
return false;
}
Usage:
Anchor
Note that the anchor needs to be enclosed in quotes, without the hash prefix.
update href property of a tag to javascript:void();
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
Demo
javascript:void(); It'll not let link to navigate anywhere.
I suggest you a different approach more generic. Easiest to use and maintain.
Use only one class for each button to detect the click. And store in data property the element that you want to show.
$(".btn-section").click(function(){
var classToShow = $(this).data("class-show");
$(".section").hide();
$("." + classToShow).show();
});
.section{
display:none;
}
.content{
width:100%;
height:2000px;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>
<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>
This resolve your problem too.
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 have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).
Here's my code:
$(document).ready(function() {
$('#locationAll').click(function() {
var value = $('#locationAll').parent().text();
$('#location-all-button').html(value + " ×").toggle('fast');
});
});
$(document).ready(function() {
$('.search-popup').click(function() {
$(this).hide('fast');
});
if ($('.search-popup').css('display') == 'none') {
$(this).text("");
};
});
button {
background-color: lightgray;
border-radius: 20px;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>
For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.
Ok so I changed a few things. I made this work for any checkbox that follows the naming scheme I made really quickly. The scheme is the id of the button = the "button-"+id. Also I hiding all buttons with a class right form the start to set their default state.
$(document).ready(function()
{
\\change to allow all checkboxes to trigger
$('input[type=checkbox]').click(function()
{
\\change the id so it match a button when add "button-" to the start
\\this allows me to target the matching button with any chechbox
$('#button-'+$(this).attr('id')).toggle('fast');
});
$('.search-popup').click(function()
{
$(this).hide('fast');
\\ sets the check box to false so it not checked when you close it
$("#"+$(this).text().replace(" ×","")).attr('checked', false);
});
\\hides all buttons right form the start
$('button.search-popup').each(function()
{
$(this).hide();
});
});
<label>
<input type="checkbox" value="all" id="All" />All
</label>
<br>
<br>
<button class="search-popup btn" id="button-All">All ×</button>
now if you want to create and remove buttons when a checkbox has changed state you can add an if state meant in that checks to see if the button with the matching id exists or not,!$(tag).size().