I would like to remove the focusable HTML tags' outline only when focus is triggered by a click event. This means I would like to keep outline for tabbing.
Does anyone know a practice or library I could use here?
If not, my idea is attaching an event listener to window that listens to click events and is nullifying target style outline on focus in the global styled component.
Is that a viable solution?
(Using React)
You don't need a library or JavaScript to do this. CSS has you covered.
Use the focus-visible pseudo selector to help you out.
*:focus-visible {
outline: 3px dashed rebeccapurple;
outline-offset: 3px;
}
<button>Click me to see no focus but tab to me and you will see my focus</button>
<br>
<button>Click me to see no focus but tab to me and you will see my focus</button>
Related
I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?
You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}
I'm using the packery library for Angularjs from here. It works fine but I found out that I cannot edit the textarea content when I click on it. After spending some time I was able to make it editable when I right click on the textarea element, but it still doesn't work if I click on it. So now I'm trying to manually trigger the right click event when I click on the textarea so it makes the element editable.
Here's the code
<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" >
<packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis">
<div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple;
background: white; border-top: 6px solid #00a2d3; padding: 10px; ">
<textarea id="Mytextarea" contenteditable="true" style="margin: 0px;"
ng-click="click();"
>{{user_text}}
</textarea>
</div>
</packery-object>
</packery>
and here's the click() function that tries to trigger the oncontextmenu (right click) event:
$scope.click = function(){
console.log('clicked!');
var e = angular.element(document.querySelector('#Mytextarea'));
console.log(e);
angular.element(e).triggerHandler("oncontextmenu");
};
But this solution doesn't seem to be working. What am I doing wrong?
I would definitely recommend finding out what is preventing you to focus on the textarea since clicking on it and focusing is the default behaviour, however, you can try to instead of having a div wrapping the textarea use a label where the 'for' attribute is the textarea's id e.g:
<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...>
Textarea here
</label>
I'd usually not accept this since label is an inline element and textarea is a block element but in your case it might help you.
For tracking what is preventing you to focus I'd recommend right click on the textarea > inspect element, and then on the elements tab of Chrome dev tools look for the 'Event Listeners' tab (should be around the right corner of the window) there should be able to see all listeners that have been bound to that element and might help you track the source of the problem.
I got CSS or jQuery/JavaScript question.
I set on many elements tabindex="0" because I need to provide tabbing through page, but I'm wondering why on pages like stackoverflow.com or developer.mozilla.org when I click by mouse I can't see outline on focus, but on my page when I click by mouse I can see outline.
Are they really setting some jQuery/JS preventing showing outline or maybe there is some good way of setting outline in css to prevent showing it?
Edit:
1. Elements on my page should have outline when user is tabbing through page by tab key,
2. Elements on my page should not have outline when user is clicking on elements by mouse
You Can Use
input,button,textarea,-----{
outline: 0; //or outline: none;
} (OR)
// Create One Class With Above Property ,Give That Class To Particular Html Element Like Below ,
.className{
outline: 0; //or outline: none;
}
I'm trying to make the cursor change on a specific event.. I don't know how to explain it but as an example, I want to change the cursor to progress when it's currently a pointer cursor (hovering links, buttons, else...) and I don't wanna type everything that has a pointer cursor like:
a, input[type='button'], button {
cursor: progress;
}
All I want to do is replace the cursor when it's a pointer to a progress.
Is this even possible? Even if it requires JavaScript or anything! If it IS possible, then please help me, I'll accept an advice, too.
Thanks in advance~
It is unlikely that this is possible. The browser(I've only checked chrome) sets the style value of cursor to "auto" or "default". So even if you check the style of an element using javascript you won't be able to tell which cursor it is using unless you already specified it in your css.
You can test this with this jquery snippet:
javscript:
console.log($('button').css('cursor'));
console.log($('input[type="submit"]').css('cursor'));
console.log($('a').css('cursor'));
html:
<button>TEST</button>
<input type="submit"/>
TEST
Is this what you are looking for?
a:hover,
button:hover,
input[type="button"] {
cursor: wait;
}
Bootstrap 3's buttons' hover state looks exactly the same with its focus state.
Is there a way to change this? I know it's just a cosmetic issue, but I want the hover state to go away when the mouse hovers away, yet still have another distinct feature to know the button has focus.
I don't know if this is my browser's issue or it is really intended (or a bug?).
I'm using Chrome latest. (Version 34.0.1847.131 m)
Link to Bootstrap 3 button samples.
http://getbootstrap.com/css/?#buttons-tags
Click on the 3rd button labelled "Input" and move mouse out.
--
Update:
I've tried overriding the default focus/hover styles, but now the button is stuck in the focus state even when you mouseover it. Is there a way to get over this? It seems the focus state has higher priority in styles than hover.
--
Thanks for the pointers guys.
For the intended behavior of still having a distinct hover state despite being in focus, the hover state needed to be redefined again.
The css I added went like this:
.btn-default:focus,
.btn-default:active,
.btn-default.active
{
background-color: #ffffff;
}
.btn-default:hover
{
background-color: #ebebeb;
}
You can override the bootstrap styles. First make sure your stylesheet or style declaration is added after bootstrap, for example:
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">
Then in your css:
.btn:focus {
background-color: red;
}
Instead of overriding the styles just make the click event .blur() from jquery.
It will remove focus on click and problem solved!
Anyone looking for Bootstrap 4, try this in your custom style CSS file
.btn-dark:hover, .btn-dark.active {
background: #31bda5;
box-shadow: none;
}