I want to detect the keycombo CTRL+ENTER in my toolbar text field and run a function.
I notice currently the default when ENTER is hit that it does on command, so I need the keycombo to fire before the oncommand.
Add an event listener to the field (true makes the handler trigger in the capturing phase) :
element.addEventListener('keydown', eventHandler, true);
where eventHandler looks like
function eventHandler(event) {
if(event.ctrlKey && event.keyCode === KeyEvent.DOM_VK_RETURN) {
event.stopPropagation(); // stop event bubbling here
event.preventDefault(); // don't execute default action
// do something
}
}
List of possible keyCodes.
Related
I currently have a button with an onclick attribute, directing to a JS function.
After I click it with my mouse, pressing the Enter key clicks the button as well, which I want to disable.
My button:
<button onclick = "action()">Button</button>
My JS function:
function action(){
//do something
}
I tried solutions from Disable Enter Key and Disabling enter key for form, but they don't work.
How do I solve this? Should I not use onclick? I would like a solution in pure JS.
You could have an event listener listening for a keydown event and check if it's the enter key and the target your button. In that case disable the event.
Something like this should work, you can add the correct type:
window.addEventListener('keydown',(e) => {
if (e.keyIdentifier =='U+000A' || e.keyIdentifier =='Enter' || e.keyCode == 13)
if (e.target.nodeName=='BUTTON' && e.target.type=='') {
e.preventDefault()
e.stopPropagation()
return false
}
}, true);
try setting the button to .blur() or set focus to another element
<button onclick = "action();">Click this</button>
function action(){
//do something
this.blur()
}
I have one callback function bound to two events (change and focusout). However, I need the focusout to happen only when the element we're interacting with is not a checkbox.
This is the example code:
$(document).on('focusout change', '.selector', function() {
if ($(this).is(':checkbox')) {
// Do stuff and prevent the focusout to trigger. HOW???
}
doStuff(); // Action that applies to both cases, but needs to be limited at one execution only
});
The code above will execute twice:
When the checkbox gets checked/unchecked
When you click outside of the checkbox (lose focus (blur))
I tried using .off, but it ends up killing the focousout handler altogether, which I will need later for other elements which aren't checkboxes.
What would be the way to prevent the focusout handler to trigger for certain elements?
What you want to do is
$(document).on('focusout change', '.selector', function(event) {
event is an event object, which has properties, one of which is type. Checking the type you can now see if your function has been called because of a focusout or a change and run code as appropriate
The best way is to affect both events (or more) to the same function, like this :
A text input for example
<input id="myfield" type="text" />
Now the Javascript
var myfield = document.getElementById('myfield');
myfield.onfocus = myfield.onchange = function(e)
{
//your code
}
Yo can even add an other element
button.onclick = myfield.onkeyup = function(e)
{
//when the client press the enter key
if(e.key && e.key == "Enter")
{
//catch the target
}
//when the client click the button
else if(!e.key || e.target == button)
{
//catch the target
}
//otherwise you can do not care about the target and just execute your function
}
You must only know that you can add many elements and many events
element1.onfocus = element1.onblur = element2.onchange = element3.onchange = function(e){//your code}
If I have a webpage and I want to monitor clicks and touches on a div, do I have to add event listeners for each event or will a touch event act as a click event by default on mobile?
Yes, by default touching an element on a mobile device will fire its click event handler. However, this behavior is usually undesirable since it allows for a 300ms delay before the event handler function runs. See this blog post for more information.
use this mousedown()
But this will record even drag and all kinda mouse button clicks.
$('yourelementid').mousedown(function(e){
if( (e.which == 1) ) {
alert("left button");
}if( (e.which == 3) ) {
alert("right button");
}else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
});
try this...
Try giving both events side by side
$('myDiv').on("mousedown touchstart", function (e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/Android/i)){
//try mousemove touchmove together
// define your logic
})
I would like to trigger a click if enter is pressed inside an input tag, but would like to have the default event strategy in all other cases. I have tried it this way:
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
It works, but I am still not satisfied, because when I click inside the input somewhere in the middle of text or press the left button, or home button and then try to type some text, it will show it at the end of the input, which is bad user-experience. Can I keep the input to work in the default way except the case when enter is pressed?
I think what you are looking for is this:
$(document).ready(function () {
$("#test").keyup(function (event) {
if (event.keyCode == 13) {
$("#campus-search").click();
}
});
$("#campus-search").click(function () {
console.log("BUTTON IS CLICKED");
});
});
The input will act completely normal and everything works on default, unless when you press the enter button (keyCode = 13), then the button .click() event will be triggered.
Working Fiddle: http://jsfiddle.net/Mz2g8/3/
————
# Update: Just one hint for the code in your question, do not use charCode, as it is deprecated.
This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
(E.g. charCode does not work with FF v29.0.1)
And something different but important to know:
charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
Source: https://developer.mozilla.org/en-US/docs/Web/API/event.charCode
This should work
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
e.preventDefault(); // prevent default action of the event if the event is keypress of enter key
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
I think you can eliminate the else clause entirely to get your desired result.
Look at this jsfiddle.
The keypress function does not capture non-printing keys, such as shift, esc, delete, and enter, so the best way to go about this would be have two event handlers: one for keypress, as you have defined above, and one for keydown that checks for the charCode 13 and then performs the click() event on $(#campus-search) if that keycode is passed (by an enter press).
Demo
This is what you are looking for:
HTML:
<input id="keywords" type="text" value="" />
<input id="campus-search" type="button" value="Campus Search" />
JavaScript / jQuery:
$("#keywords").keypress(function (e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
$("#campus-search").on("click", function () {
alert("Searching..");
});
Live Demo
I need to bind the 'enter' key on the keyboard to a specific javascript method, but ONLY when a certain text field is in focus.
<input id="post" type="text" style="width:400px;"/>
How would I do this?
I know you can do it with forms and stuff that have a submit action, but can I just bind the 'enter' key to a specific function when this above input field is in focus?
$("#post").focus(function() {
$(this).data("hasfocus", true);
});
$("#post").blur(function() {
$(this).data("hasfocus", false);
});
$(document.body).keyup(function(ev) {
// 13 is ENTER
if (ev.which === 13 && $("#post").data("hasfocus")) {
...
}
});
I recommend you instead bind the the ENTER keyup event on your $("#post") input directly rather then listening for the event on the entire page.
Just bind the onkeyup event to the input in question. You don't need to worry about checking focus at all, because by definition that input will only receive keyup events when it has focus.
I assume JQuery is OK since you included the tag in your question, so within your document ready handler do something like this:
$("#IDforyourcontrol").keyup(function(ev) {
// 13 is ENTER
if (ev.which === 13 && /*whatever other conditions you care about*/) {
// do something
}
});