I have the code blow for tabbing through 2 fields and it has no effect in IE and Chrome, it seems it runs nothing (for example I get nothing when I put alert) and in Firefox it runs with some bug (it jumps twice there) where do you think the problem is, I'm developing in by ASP.Net and jQuery version 1.3.2
$(document).ready(function () {
$("#TextBox1").keypress(function (e) {
var kCode = e.keyCode || e.charCode;
if (kCode == 9) {
$("#TextBox2").focus();
}
});
});
I think the main problem is that you're using the keypress event, which should only be fired when a character is added to the input, not when any key (like TAB) is pressed.
To handle other key presses you will need to use keydown. However, testing that in your fiddle seems to still not work. To make it work (in Chrome at least), I had to prevent the default action:
$(document).ready(function () {
$("#TextBox1").keydown(function (e) {
e.preventDefault();
var kCode = e.keyCode || e.charCode;
console.log(kCode);
if (kCode == 9) {
$("#TextBox2").focus();
}
});
});
Here's an update fiddle. However, if I've understood your question correctly, all you're trying to do is change the focused element when the tab key is pressed... if that's right, why not just use the tabindex attribute instead?
The keypress event does not fire for tab (keycode 9). You'll need to use keyup or keydown.
If this is ASP.NET, you need to reference the controls by the ClientID:
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").keypress(function (e) {
var kCode = e.keyCode || e.charCode;
if (kCode == 9) {
$("#<%=TextBox2.ClientID%>").focus();
}
});
});
Related
I have an input field on my results page. I used the following event:
onkeypress="if (event.keyCode == 13) {document.getElementById('results-search').click()}"
The problem is that when I perform a search, nothing happens when I click the search button. It does not work when I click or press enter neither. This occurs only on Mozilla Firefox and Microsoft Edge, but works fine on Google Chrome. Please help
event.keyCode property may not be supported in some browsers. Try to use event.keyCode || event.which instead:
onkeypress="if ((event.keyCode || event.which) == 13) {document.getElementById('results-search').click()}"
If you use jQuery it doesn't matter if you use keyCode or which property, both of them will work. You added jquery tag, but you didn't use it in your code.
BTW. isn't it better to handle button's click event as well? In my opinion it would look more elegant. It's also good to separate JavaScript code from HTML.
document.getElementById('input-search').onkeypress = function(e)
{
if ((e.which || e.keyCode) === 13)
search();
};
document.getElementById('results-search').onclick = search;
function search()
{
//do something...
}
I am having some controls in my page (controls are kept inside iframe). i am binding keydown event to the controls as below,
$(function () {
$(document).on("keydown", function (e) {
if (e.altKey && e.keyCode === 74) { // j- key code.
$("#accordion").focus();
}
});
});
After the page load, if i press alt + J the control gets focused properly in chrome but not in Firefox and IE. The control gets focused, only if i click in the iframe area and then press the alt + J. If i remove the iframe the controls gets focused properly in all the browsers without the need to click on the iframe area. How can i make the controls to get focus if i press alt + J and without the need to click on the iframe area?
Thanks in advance.
I think you could either use document.ready or window.onload
example please look below:
$(document).ready(function() {
$(document).on("keydown", function (e) {
if (e.altKey && e.keyCode === 74) { // j- key code.
$("#accordion").focus();
}
});
});
Or
$(window).load(function() {
$(document).on("keydown", function (e) {
if (e.altKey && e.keyCode === 74) { // j- key code.
$("#accordion").focus();
}
});
});
I hope it works in all
You can use .load() event on iframe and get the contents with .contents() like this:
You can replace this line:
$("#accordion").focus();
with this code:
$('iframe').contents().load(function(){
$(this).find("#accordion").focus();
});
If you are working with iframe then you have to wait for the iframe to be loaded then execute the .focus()
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 would like to call a function when the tab key is pressed within any field with the name="notes".
I tried the following but this doesn't fire (using IE 9). What do I have to change here to make this work at least in IE 8 and IE 9 ?
$('input[name=notes]').keypress(function(e) {
var code = e.keyCode || e.which;
if (code === 9) {
e.preventDefault();
myFunction();
}
});
The problem I think is in the type of event you're trying to listen to.
The keypress event is triggered when a char gets written into an input text, while tab key doesn't insert any character. It just blurs the input. Read more here.
You might be looking for the keydown event instead.
Have a look at this fiddle. Would it help to get you started?
JS
$('input[name=notes]').keydown(function(e) {
var code = e.keyCode || e.which;
if (code === 9) {
e.preventDefault();
myFunction();
alert('it works!');
}
});
For some reason this script isn't working in Firefox:
document.onkeydown=function keypress(e) {
if (e.keyCode == 27) {
window.location = "/edit"
};
};
It works fine in Chrome, but for some reason it's not working in Firefox.
Basically, what it does is load the /edit page when you press the escape key.
use:
document.onkeydown=function keypress(e) {
e=(e||window.event);
if (e.keyCode == 27) {
try{e.preventDefault();}//Non-IE
catch(x){e.returnValue=false;}//IE
window.location = "/edit";
};
}
The default-action for ESC is to stop loading the page,
so you must prevent from this behaviour, otherwise you cannot change the location.
Fiddle: http://jsfiddle.net/doktormolle/CsqgE/ (Click into the result-frame first before using ESC)
But however, you really should use another key.
A user expects that the loading of the current page stops if he uses ESC , nothing else.
The event handler is working for me: http://jsfiddle.net/Tm2PZ/
I suspect the lcoation you're setting is not valid.
Try setting window.location.href instead.
if you don't use 'Escape keyup or Escape keydown' for other things in your code, you can use 'keyup' to replace keypress**
document.body.addEventListener( 'keyup', function (e) {
e=(e||window.event);
if (e.key == "Escape") {
console.log('escape is pressed');
}
},false );
e.keyCode is depreciate, use e.key, add "console.log(e.key)" in your listener if you want to get key name
it is better, because it adapts to the keyboard which does not have the same composition and e.keyCode does not adapt