Anyone know how to prevent an HTML checkbox from getting focus when clicked? I still want it to change state, just not get focus.
You can prevent the focus by using preventDefault() in a mousedown handler:
$('input[type=checkbox]').mousedown(function (event) {
// Toggle checkstate logic
event.preventDefault(); // this would stop mousedown from continuing and would not focus
});
In pure JavaScript:
checkbox.onmousedown = function (event) {
// Toggle checkstate logic
event.preventDefault(); // this would stop mousedown from continuing and would not focus
}
Give this CSS:
input {outline: 0;}
But be aware that when you move control using Tab key, it won't be possible to identify which control are you in currently.
Update #1
Use this JavaScript:
$('input[type=checkbox]').click(function () {
this.blur();
});
Related
I have an input that when clicked shows a bootstrap 4 dropdown BUT I need it to open when a user tabs to it as well for ADA accessibility.
If I use a focus event that uses $('#input-name).dropdown('toggle') it works fine, but when the input is clicked focus fires first which opens the dropdown and then the click event closes it.
I have tried e.preventDefault(); e.stopPropagation(); but neither help solve this issue.
events: {
focus #healthPlanMenu": "openDropDown"
}
openDropDown: function (e) {
if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
}//fails
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
$( "#healthPlanMenu" ).click();//fails
}
So ideally you'd probably solve this by having the focus event set the dropdown's state to open, that way if it gets "reopened" by the click event, no problem. However, as far as I can tell there is only a toggle option with the jQuery API; seems unnecessarily limiting...
Given that, we can know if a click is coming after our focus event by using mousedown. So a somewhat hacky way to solve this problem is to disable our focus event if we know a click is coming.
(function() {
var disable = false;
$('#healthPlanMenu.dropdown-toggle')
.on('mousedown touchstart', function() {
disable = true;
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle');
}
})
.on('mouseup touchend',function() {
disable = false;
})
})()
I don't know if the touchstart and touchend are necessary as most browsers probably fire mouse events on touch as well. But better safe than sorry.
I made a cookie clicker using javascript and html, and at the moment I have it made so that upon clicking an image, it fires a function which increases your score. I want to make it so that instead of only being able to click the image, you can just click any button on the keyboard to fire the same function. I've only seen code to do this in an input field. I'm not sure if "document.addEventListener("keydown", function())" is what I'm looking for.
Try:
document.onkeydown = function() {
console.log('my code');
};
Edit (or):
document.onkeydown = myFn;
To listen for keypress you can add keydown event on document
document.addEventListener("keydown", callBack, false);
function callBack(e) {
var keyCode = e.keyCode;
console.log(keyCode);
}
Just assign a event handler to your event.
If you want to assign for the whole document, use this:
document.addEventListener("keydown", keyDownTextField, false);
document.getElementById("yourinput").addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
console.log(e.keyCode);
}
<input id="yourinput" type="text" />
document.addEventListener('keydown', () => {
console.log('a');
});
should work.
However, some browsers don't give document focus, which is required for keydown events.
The classic approach to this (which works more universally) is to create an off-screen <input> element, and give it a blur event to regain focus when it loses it. This will force focus to always stay on that input, then it can receive key events.
const input = document.createElement('input');
input.style.position = 'absolute';
input.style.left = '-100000px';
input.addEventListener('blur', () => input.focus());
input.addEventListener('keydown', () => console.log('key down'));
document.body.appendChild(input);
input.focus();
This code:
- creates a new input element
- positions it absolutely way off the left of the screen (so it's not visible)
- adds a blur event which automatically gets focus back
- adds the keydown event itself
I'll keep it short and sweet. Trying to implement .select in jQuery and it doesn't seem to be cooperating in Chrome. Clicking in to the input selects the contents only briefly.
$(document).on('focus','.a-thing', function () {
this.select();
});
jsFiddle
this is not a jQuery object
$(document).on({
focus : function () {
$(this).select();
},
mouseup : function() {
return false;
}
}, '.a-thing');
FIDDLE
And you have to prevent the mouseup event to avoid loosing the selection as the mouseup event deselects the text, it's a know issue in Chrome.
Probably due to using the focus event. Try to fire the select event after the focus is complete:
$(document).on('focus','.a-thing', function () {
var self = this;
setTimeout(function() {
self.select();
},1);
});
Updated jsFiddle
User click event instead of foucs, because keyboard tab key will auto select field value without foucs event
$(document).on('click','.a-thing', function () {
this.select();
});
JSFIDDLE DEMO
You can active the select on the mouse up instead of the focus. Chrome seems to de-select on the mouse up event.
$(document).on('mouseup','.a-thing', function () {
$(this).select();
});
Or if you want to keep the focus event, you can prevent the action on mouse up
$(document).on('mouseup','.a-thing', function () {
e.preventDefault();
});
On mouseup event the selection is getting unselected, Please add the following to fix the issue
$(".a-thing").mouseup(function(e){
e.preventDefault();
});
DEMO
I disable a jQuery click event with:
$("#button").click( function () { return false;}
How can I enable it? The intention is avoid double clicks and run multiple times the function that triggers.
I want to restore the event when other button was pushed.
There's a couple options, but I like the following best:
//disable
$("#button").bind('click', function() { return false; });
//enable
$("#button").unbind('click');
You could also bind click again on the button to some other callback function as well. Lastly, I might suggest calling preventDefault on the event from a click event, depending on what #button really is like so:
$("#button").bind('click', function(e) {
e.preventDefault();
return false;
});
As j08691 pointed out, as of jQuery 1.7 on, it should look like:
$("#button").on('click', function(e) {
e.preventDefault();
return false;
});
You could also use one:
$("#button").one('click', function () { /* code here */ });
The event will unbind itself after being called once.
If you do:
$("#button").unbind("click");
the button will be working again, the unbind function erases registered events handlers from the selected element, if you dont pass it an argument it will erase all events registered.
EDIT: as noted in the comments, you can use now the on and off methods:
$("#button").off("click")
to disable clicks and:
$("#button").on("click")
to enable them again
There are two elements in play:
$('#myInput') // an input field for search
$('#myList') // a list to display search results
I want to hide the list when the input no longer has focus, like so:
$('#myInput').blur(function() {
$('#myList').hide();
});
This works great, except when a list item is clicked, because the blur event fires and hides the list before the click is registered. The goal is for the list to stay visible when any part of the list is clicked, even though this will cause the input to blur.
How can I do this? Thanks!
You can accomplish this by keeping a global variable, and setTimouts, to wait a delay of 200ms and then check if one of the 2 elements have focus.
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#myList').hide();
}
}
$('#myInput').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
$('#myList').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
I've faced with the exact same problem, so this is how I solved it.
I came up with the fact that blur() fires earlier than click().
So I've tried to change click() to mousedown() and found out that mousedown() fires before blur().
And to imitate click() you'll have to fire mousedown() and then mouseup()
So in your case I would do something like this:
var click_in_process = false; // global
$('#myList').mousedown(function() {
click_in_process = true;
});
$('#myList').mouseup(function() {
click_in_process = false;
$('#myInput').focus();
// a code of $('#myList') clicking event
});
$('#myInput').blur(function() {
if(!click_in_process) {
$('#myList').hide();
// a code of what you want to happen after you really left $('#myInput')
}
});
Demo / example: http://jsfiddle.net/bbrh4/
Hope it helps!
You need to be able to say "do this blur() unless the list gains focus at the same time".
This question says how to detect if an element has focus: Using jQuery to test if an input has focus
Then all you need to do is:
$("#myInput").blur(function () {
if (!$("#myList").is(":focus")) {
$("#myList").hide();
}
});
Pigalev Pavel's answer above works great.
However, If you want an even simplier solution, you can just "prevent default" in the "mousedown" of an element to prevent the blur event from taking place. (since preventing default actually means that in the end, the input never looses focus in the first place!)
Of course, this is only if you're alright with preventing default in the div. It does have some side-effects, like the text is no longer selectable. As long as that's not an issue, this will work.
I suppose if you hold the mouse down over the div, move the mouse outside of the div, and then release the mouse, it also doesn't fire the "blur" event. But in my case, I wasn't too worried about that either, since the click started in the target div.
$("input").focus(function(){
$(this).val("");
});
$("input").blur(function(){
$(this).val("blur event fired!");
});
$("div").mousedown(function(e){
e.preventDefault();
})
div{
height: 200px;
width: 200px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>
The best way to do this is to attach an event handler to the body element, then another handler to the list that stops event propagation:
$(body).click(function () {
$("#myList").hide();
});
$("#myList").click(function (e) {
e.stopImmediatePropagation();
});
This listens for a click outside of #myInput and hides #myList. At the same time, the second function listens for a click on #myList and if it occurs, it prevents the hide() from firing.