i am capturing an event on enter through a selector. but it is not capturing.
var trID;
row.click(function() {
var tr = $(watchRow).find('tr');
$('tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
trID = $(this).attr('id');
alert(trID);
});
row.find('trID').keypress(
function(event) {
if (event.keyCode == 13) {
//selfReference.addSymbolToWatch();
alert("You Press Enter!");
}
});
i am getting trID but actually what i want to do is when the row is selected then it is able to trigger an enter event on pressing enter.
You'll need to make the tr focusable by adding the attribute focusable to be able to capture keypresses.
I have tried this and it works as you requested when the 'TR' is selected
$(document).ready(function(){
$('tr').live('keypress',function(){
if (event.keyCode == 13) {
alert("You Press Enter!");
}
});
});
Related
I am using following code to tab through form elements using enter key. Problem is that this code skip select2 elements.
$('body').on('keydown', 'input, select', function(e) {
if (e.key === "Enter") {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
focusable = form.find('input,a,select,button,textarea').filter(':not([disabled]):not([tabindex="-1"]):visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
//form.submit();
}
return false;
}
});
Change your keydown to keyup
$('body').on('keyup', 'input, select', function(e)
Reason is keydown is already handled in select2 library for choosing an item
I'm creating a form with multiple labels, and I used this javascript so I can click on the Enter button (in the keyboard) without jumping into the submit button (in the form), the following is working well but just in 1 label, how can I using it for all the labels without copy & past it changing the label id?
<script>
$(document).ready(function() {
$('#text1').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
document.getElementById("text1").value = document.getElementById("text1").value + "\n";
return false;
}
});
$('#text2').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
document.getElementById("text2").value = document.getElementById("text2").value + "\n";
return false;
}
});
});
...
...
</script>
Since you are binding your key listener to $('#text1') and $('#text2'), it will only listen when your key is pressed while focusing these elements.
You have to bind your listener to a different selector that catches all your inputs, eg.:
$('.form-class input').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
...
}
});
I have some td elements with a class name, I need to fire a pop up window when one of these td is in focus & a key F9 is pressed. I've tried following:
$(document.body).keypress(function (e) {
$(".HolidayName").hover(function () {
if (e.keyCode == 120) {
//alert("first");
SelectedItemOfListOfValue('HolidayNameWindowGrid');
HolidayNameWindow.open(); //Open Popup
}
}, function () {
});
});
I'm using hover since focus can't be used with td elements (as per my search, not sure). But the current output is not what I desired. At the moment it fires the pop up after pressing the key once & hovering the mouse over that td.
Try this. Use event delegation to delegate keyup event on 'td.HolidayName' :
$(document).on('keyup', 'td.HolidayName', function(e) {
if (e.which == 120) {
SelectedItemOfListOfValue('HolidayNameWindowGrid');
HolidayNameWindow.open(); //Open Popup
}
});
Add an event listener to watch for the press on the F9 key (keyCode 120). Also, set a flag variable when the td is hovered/un-hovered. When f9 is pressed, check that the hover flag is set. If it is, respond however you want!
Live demo here (click).
var hovered = 0;
$(document).keydown(function(e) {
if (e.keyCode === 120 && hovered) {
console.log('td hovered and f9 pressed!');
}
});
$('td.hover').hover(function() {
hovered^= true;
}, function() {
hovered^= true;
});
This is meant to allow a user to type in a message and then press enter to send it. This should clear the box so that the user can type in a new message. The problem is that the standard result of pressing enter (creation of a newline) is occurring after the .empty() event....so the text vanishes and is replaced by a newline, which is quite undesirable. How can I circumvent this?
$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
send();
$('#messagebox').empty();
}
});
You can prevent the default action of the keypress via event.preventDefault() (or return false from your event handler function, which is jQuery shorthand for preventDefault + stopPropagation):
Live example | source:
HTML:
<p>Pressing Enter will clear the text area below:</p>
<textarea id="messagebox" rows="10" cols="50"></textarea>
JavaScript:
jQuery(function($) {
$("#messagebox").focus().keypress(function(event) {
if (event.keyCode === 13) {
$(this).val("");
event.preventDefault();
}
});
});
FWIW, I'd probably use val with an empty string rather than empty to clear the textarea, since val is specifically for setting the value of form fields — but if empty() is working for you...
$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
send();
$(this).empty();
}
});
demo
$('#messagebox').on('keydown',function(e) {
if (e.which === 13) {
send();
$(this).val('');
e.preventDefault();
}
});
I have this CSS3 enter button
here:
If you click it, it seems like it's pressed. I want to achieve the same effect (probably using jQuery), by pressing the enter key physically on my keyboard.
I did something like this: (sorry if it's completely wrong, I don't do jQuery at all)
<script type="text/javascript">
$(document).ready(function(){
$("enter").keypress(function(event){
if(event.keyCode == 13){
$(this).toggleClass(".button-clicked");
}
});
});
</script>
The CSS selector for the unpressed button is:
.button and .button.orange {}
The CSS selector for the pressed button is:
.button:active, .button-clicked {}
Thanks for your help!
I haven't tested this, but I think you should be able to do something like
I have just tested this (and linked to a demo, below the jQuery), and it works pretty well:
$('body').keydown(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').addClass('button-clicked');
}
}).keyup(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').removeClass('button-clicked');
}
});
JS Fiddle demo.
With this the keydown causes the button to appear pressed so long as the enter key is pressed, and, on release, triggers the keyup() handler, changing the style of the button so as to appear un-clicked.
Refined the above, somewhat, using on(), though having to use an if/else if statement to check the function type:
$('body').on('keydown keyup', function(e) {
if (e.type == 'keydown') {
if (e.which == 13) { // enter
$('#button').addClass('button-clicked');
}
}
else if (e.type == 'keyup') {
if (e.which == 13) { // enter
$('#button').removeClass('button-clicked');
}
}
});
JS Fiddle demo.
References:
keydown().
keyup().
addClass().
removeClass().
on().
You are trying to apply the keypress to an <enter></enter> element (which doesn't exist), try doing this:
<script type="text/javascript">
$(document).ready(function(){
$("body").keypress(function(event){
if(event.keyCode == 13){
$(".button").toggleClass("button-clicked");
}
});
});
</script>
Close but how about this:
//bind to the `keydown` event when the `document` is focused
$(document).on('keydown', function (event) {
//if enter is pressed
if (event.keyCode == 13) {
//add the `.button-clicked` class to any element with the `.button` class
$('.button').addClass('button-clicked');
}
}).on('keyup', function (event) {
if (event.keyCode == 13) {
$('.button').removeClass('button-clicked');
}
});
Here is a jsfiddle: http://jsfiddle.net/jasper/T5yEu/2/
Notice that I added !important to the .button-clicked class on several of the rules to make sure they are added to the element.