I am able to style the drop-down icon for the select box. However, I want to toggle the icon depending if the dropdown is visible or not.
when dropdown is not visible, show icon1
when user clicks on dropdown, show icon2
when user closes the dropdown, show again icon1.
What I did is to use the :focus on select to manipulate the icon.
The problem is with the last step. When user clicks anywhere on the screen - or press ESC for example - to close the dropdown, the focus is still on the select tag, and the style is not changed back. Only until user clicks one more time, the focus is removed and everything is back to normal.
Is there way to force focus removal when dropdown is closed?
This is examined in Chrome.
https://codepen.io/igorspasic/pen/GQqKqy
p.s. javascript is welcome, of course.
You can include jQuery library and add the following jQuery code in <script> tag.
$(document).ready( function() {
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#x").blur();
}
});
$("#x").change( function() {
$("#x").blur();
});
});
You should be able to set it to blur with JavaScript. Here I've just used a change and mouseout event to remove the focus:
var select = document.querySelector('#x');
function blurSelect() {
select.blur();
}
document.onkeyup = function(e){
if (e.keyCode === 27) {
blurSelect()
}
};
select.onmouseout = function() {
blurSelect()
};
select {
color: white;
background-color: blue;
font-size: 20px;
}
select:focus {
background-color: red;
}
<select id="x">
<option>One</option>
<option>Two</option>
</select>
<br><br><br>
Q: How to remove focus on select when dropdown is closed and turn back to blue?
Hope this helps.
Related
So i have an input with a dropdown underneath. So when i click into an input the dropdown opens. But i can't select anything from the dropdown cause it is not focussed. So when i click on a value it doesnt get selected and the dropdown closes again because it looses focus. So i am now wondering how i can include the div into the focus of the input.
HTML input:
<input type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}"
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>
HTML div (dropdown):
<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >
<p
*ngFor="let data of dataList; let i = index"
class="data-list"
(click)="updateTextBox(i,data[columnName]); focusOnInput();"
[ngClass]="{highlight:checkHighlight(i)}"
> {{data[columnName]}}</p>
</div>
Component:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
this.showDropDown = false;
}
blur event happens on your input because of mousedownon list item
So in order to prevent this you need to add
(mousedown)="$event.preventDefault()"
handler for your list items.
I created simple demo:
https://stackblitz.com/edit/angular-x3cdr1
Have you in your CSS, tried setting the z-index to 1 for the dropdown class when it is expanded?
Please share a plunkr or a stackblitz link to look at the scenario.
The simplest approach would be as follows:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
I think checking this stackblitz would help also:
https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts
I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:
<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
<span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
<span>{{ refresh }}</span>
</button>
Here is example to testing:
<button type="button" disabled="disabled" onclick='alert("test");'>
<span>Click me!</span>
</button>
One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.
Just set
pointer-events: none;
for disabled buttons.
Here's CSS to disable all disabled elements everywhere:
*[disabled] {
pointer-events: none !important;
}
pointer-events documentation
This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).
Reported multiple times via Microsoft Connect:
Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled
The bug was still present in Build 10565 (16 October 2015).
It was fixed in the November update, Build 10586.
A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).
One work around I've come up with using angularjs is inspired by Ben Nadel's blog here
So for example:
angular.module('myModule').directive(
"span",
function spanDirective() {
return ({
link: function (scope, element, attributes) {
element.bind('click', function (e) {
if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
e.stopPropagation();
}
})
},
restrict: "E",
});
}
);
Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.
var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
$provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);
if (isEdge) {
var directiveConfig = $delegate[0];
var originalCompileFn = directiveConfig.compile;
directiveConfig.compile = function() {
var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);
// Register a click event handler that will execute before the one the original link
// function registers so we can stop the event.
return function linkFn(scope, element) {
element.on('click', function(event) {
if (event.currentTarget && event.currentTarget.disabled) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
});
return origLinkFn.apply(null, arguments);
};
};
}
return $delegate;
}]);
}]);
I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
Does anyone know if this is doable?
Hoping for it to look something like this. Currently this is a button with an image and a span inside of it which has a hover over effect.
I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly...
You can bind click handlers to almost any DOM element.
...but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
So use an <a> element. All you need to do is check which mouse button was used, and that the Ctrl, Alt, and Shift keys are not pressed (otherwise the user is trying to open the link in a new tab, or other such shortcut behaviors).
document.querySelector('.btn').addEventListener('click', function (e) {
if (e.button === 0 && !e.ctrlKey && !e.altKey && !e.shiftKey) {
alert('button was clicked!');
e.preventDefault();
}
}, false);
.btn {
background-color: #8CF;
border: 1px solid #00F;
display: inline-block;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.btn:focus {
border-color: #000;
}
.btn__icon {
display: block;
margin: 0 auto;
padding: 17px 17px 0;
}
<a href="http://example.com/" class="btn">
<img class="btn__icon" src="http://placehold.it/40x40/FFF/000"/>
<span class="btn__label">Details</span>
</a>
I would use a link styled like a button. You can set it up to look like a button and set up click events, as well as opening it in a new tab.
Perhaps try something like this - style the <a> as a button (as proposed by previous answers) and then prevent default on click:
HTML
<a id = "btn" href = "http://www.google.com">CLICK ME</a>
jquery
$('#btn').click(function(e){
e.preventDefault();
alert('hello');
});
FIDDLE
This gives you a click function on the link, prevents the default action, but retains the right click context menu.
I'm not 100% sure I understood the question but I think this is what you mean..
<input type="button" id="button1" onclick="clickFunction()" value="Click Me!">
<script>
function clickFunction() {
document.getElementById("button1").onmousedown = function(event) {
if (event.which == 3) { <!--3 = right click-->
window.open('target', '_blank'); <!--Opens target in a new tab-->
}
}
}
</script>
I don't think that you can change the context menu that pops up to add "Open in new tab" on right click but you can tell how to handle a right click.
Edit: Actually you can change the default context menu I believe but I don't think you can do it without 3rd party libs? Again not sure about that someone else will have to give you a better answer sorry :/
Edit2: After seeing your initial edit I'd agree with #Surreal Dreams. Use styling and make a normal link with an image and hover effect :)
I have a main div (parent) with a input (child) and 2 other child div (clickable).
I want to capture focus out event for the main div - not when input or other 2 clickable div are clicked or focused. I have set up an event handler using jQuery to capture focusin focusout events on all the elements.
What I see is when I click on the input:
first input is focused
then the main div.
If I click on any other clickable divs
event fires first focusout for input
then main div and then other div gets focus in and main div get focusin.
I don't want main div to loose focus when clicked on other clickable divs.
How can I achieve this? I want to validate the input on lose focus but not when clicked other divs.
So far this is what I have : Fiddle
HTML :
<div id="main">
<input id="i" type="text" />
<div id="Div2" class="icons" style="background-color:blue; right: 25px;" onclick="log('Clear Clicked');"></div>
<div id="Div1" class="icons" style="background-color:red;" onclick="log('DD Clicked');"></div>
</div>
CSS :
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
#main {
top: 50px;
left: 200px;
position: absolute;
border: 1px solid #00bfff;
width: 250px;
height: 27px;
}
input {
border: none;
width: 248px;
height: 25px;
position: absolute;
z-index: 200;
}
.icons {
text-align:center;
border:1px solid blue;
height: 23px;
width: 23px;
position: absolute;
top: 2px;
right: 2px;
z-index: 99999999999999999999999;
background-position: center;
background-repeat: no-repeat;
}
jQuery :
$("#main").focusin(function () {
log("Main div got focused");
});
$("#i").focusin(function () {
log("input got focused");
});
$("#Div2").focusin(function () {
log("dropdown div got focused");
});
$("#Div1").focusin(function () {
log("clear div got focused");
});
$("#main").focusout(function () {
log("Main div lost focused");
});
$("#i").focusout(function () {
log("input lost focused");
});
$("#Div2").focusout(function () {
log("dropdown div lost focused");
});
$("#Div1").focusout(function () {
log("clear div lost focused");
});
function log(msg) {
//window.console.log(msg);
$("body").append("<p>" + msg + "</p>");
}
Any help or guidance appreciated
Here is a best way to solve, because I had the same problem too ^_^
There is a attr of event: "relatedTarget"
relatedTarget will provide the next element of this event
So, if next element is not your box OR anything inside your box, trigger focus out.
But FIRST you have to let your <div> element focusable, you have to add tabindex='-1' on div like this
<div id="main" tabindex='-1'>
the script is short:
$("#main, #main *").blur(function(e){
if(!$(e.relatedTarget).is("#main, #main *")){
//focus out.
}
});
The focus will lost and get inside #main, but you can do anything when the focus is lost from #main area.
This is a little different to your request, but I guess this may be what you want.
If this is, the code would be very clean.
Based on this accepted answer Is there a way to use event.preventDefault with focusOut? If not, why?
$(document).on('mousedown', function (event) {
target = event.target;
main = document.getElementById("main");
input = document.getElementById("i");
if (target == input) return true;
parent = event.target.parentNode;
if (parent == main) {
event.preventDefault(); //prevent default DOM action
event.stopPropagation(); //stop bubbling
return false; // return
}
});
OK, so it looks like you are constructing some sort of input widget. I see that the #main div is the outer container of the widget, the input is for entering text, and then you have two other divs serving as buttons or something. You want to validate the value of the input when the user tries to exit the widget, and you are trying to capture this event by listening for focusout on #main. This won't work because a div isn't an element that can receive focus. See the answer here for more.
I can prove to you that your div isn't focusable with a little experiment:
If you put e.stopPropagation() in both your focusin and focusout listeners for your input, you'll see that your main div is never actually focused or unfocused itself; it was just receiving the focusin and focusup events as they bubbled up the DOM tree from your input.
So, this means we have to tackle your problem from another angle.
Let's describe what it means for your widget to lose focus with a short user story:
User clicks on the input/#main/#Div1/#Div2 -- widget gains focus
User clicks on input (if he/she hasn't already) and types some text -- widget focus is not lost
User clicks somewhere on #main -- widget focus is not lost
User clicks #Div1 and then #Div2 -- widget focus is not lost
User clicks somewhere else on the page -- widget focus is lost -> validation runs
We now know exactly which events during which states should cause validation to run.
First, let's keep track of the 'focus' state of the widget with a boolean variable:
var isFocused = false;
The widget starts out in the unfocused state and becomes focused when there is a click anywhere in #main or its children OR when the input is somehow focused (could be via tabbed-into with the keyboard):
$("#main").on('click',function(){
isFocused = true;
});
$("#i").on('focus',function(){
isFocused = true;
});
The only time the widget becomes unfocused is when a) it's focused and b) the user clicks somewhere else on the page:
$(document).on('click',function(){
if(isFocused){
isFocused = false;
//kick-off the validation check!
}
});
But since all events bubble-up the DOM tree by default, multiple clicks within #main will bubble up to document.body and trigger a validation check. To prevent this, we call stopPropagation on the click event in the #main's click handler:
$("#main").on('click',function(e){
isFocused = true;
e.stopPropagation();
});
That's it!
I hope I was correct about what you're after.
Here's a working fiddle with above code.
Here is simple way to do it (As far as i understood)
$('#Div1').click(function(){
log('Clear Clicked');
//$('#main').focusin();
$('#i').focus();
});
$('#Div2').click(function(){
log('DD Clicked');
//$('#main').focusin();
$('#i').focus();
});
here is fiddle
The other way to workaround is to add a small setTimeout before running focusout handler.
You can easily whitelist a list of elements to exclude with and clearTimeout when they get focusin.
How do you make a button in Bootstrap 3 undepress automatically after being clicked?
To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):
<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">
Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).
Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.
Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/
In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:
Click and hold on a button.
Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.
If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.
Example
This example uses jQuery but you can achieve the same effect with vanilla JavaScript.
$(".btn").mouseup(function(){
$(this).blur();
})
Fiddle
Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:
one.
See the Anchor element section here: http://getbootstrap.com/css/#buttons
The button remains focused. To remove this efficiently you can add this query code to your project.
$(document).ready(function () {
$(".btn").click(function(event) {
// Removes focus of the button.
$(this).blur();
});
});
This also works for anchor links
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
// Removes focus of the anchor link.
$(this).blur();
});
});
My preference:
<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
Or angular way:
function blurElemDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);
Replace _MORE_ELEMENT_ with your others elements.
Or attribute way:
function blurElemDirective() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('blurMe', blurElemDirective);
Then add the attribute to your html element: blur-me
<button blur-me></button>
It's the browser's focus since it's a form element (input).
You can easily remove the focusing with a little css
input:focus {
outline: 0;
}
Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/
EDIT
Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:
.btn-default:focus {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
If you don't want this behaviour, just overwrite it with your css.
This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:
.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ccc;
border-color: #fff;
}