I'm using this to click on an element to open a link. Is there a way to make it open a new tab when I hold the cmd-key down (and whatever that reflects in other OS)?
$(document).on('click', '.row', function(e) {
e.preventDefault();
window.location = '?id=' + $(this).data('id');
});
Basically the way a normal <a> works but via JS.
Try this:
$(document).on('click', '.row', function(e) {
e.preventDefault();
if (cmd) window.open('?id=' + $(this).data('id'), "_blank");
else window.location = '?id=' + $(this).data('id');
});
var cmd = false;
$(document).keydown(function(e) {
var key = e.which || e.keyCode;
if (key == 91 || key == 93 || key == 17 || key == 224) cmd = true;
});
$(document).keyup(function(e) {
cmd = false;
});
.row { border: 1px #000 solid }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">Click Me</div>
Sure, you just need to keep track of whether your target key(s) are being pressed in addition to your click handler:
document.querySelector('#test').addEventListener('click', function(e) {
if(cmdPressed) {
console.log('new tab');
// window.open('');
} else {
console.log('redirect');
// location.href = '';
}
})
// keeps track of whether user is pressing cmd key
var cmdPressed = false;
document.body.addEventListener('keydown', function(e) {
cmdPressed = e.which === 91;
});
document.body.addEventListener('keyup', function(e) {
cmdPressed = false;
});
<div id="test">
Click or CMD+Click me
</div>
or with jQuery:
$(document).on('click', '#test', function(e) {
e.preventDefault();
if(cmdPressed) {
console.log('new tab');
// window.open('');
} else {
console.log('redirect');
// location.href = '';
}
});
// keeps track of whether user is pressing cmd key
var cmdPressed = false;
$(document).on('keydown', function(e) {
cmdPressed = e.which === 91;
});
$(document).on('keyup', function(e) {
cmdPressed = false;
});
Related
I have joined a script called jquery.mycart with datatable.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key == "Enter" || evt.key == "Enter");
} else {
isEscape = (evt.keyCode == 13);
}
if (isEscape) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
}
};
I have a problem that when we suppose we search for "Antalgina" when we press enter this search is added to the shopping cart. (look at the console).
Full code
https://codepen.io/anon/pen/oaQJNg
Please how could I do it or give me some hint
I hope you can help me.
Working codePen.
You could a simple jQuery event like :
$("document").on('onkeydown', function (e) {
if (e.keyCode !== 13) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
});
});
How do I get my enter key to perform the same action and my submit button?
I have my code here, and I would like the form to submit if the user presses submit, or presses the enter button on the keyboard
I have tried using if statements with keycode 13, but nothing is working for me.
Here is my Javascript code:
window.addEventListener('load', function(){
// Add event listeners
document.getElementById('add-item').addEventListener('click', addItem, false);
document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false);
document.querySelector('.todo-list').addEventListener('click', removeItem, false);
function toggleCompleted(event) {
console.log('=' + event.target.className);
if(event.target.className.indexOf('todo-item') < 0) {
return;
}
console.log(event.target.className.indexOf('completed'));
if(event.target.className.indexOf('completed') > -1) {
console.log(' ' + event.target.className);
event.target.className = event.target.className.replace(' completed', '');
document.getElementById('add-item').value='';
} else {
console.log('-' + event.target.className);
event.target.className += ' completed';
}
}
function addItem() {
var list = document.querySelector('ul.todo-list');
var newItem = document.getElementById('new-item-text').value;
var newListItem = document.createElement('li');
newListItem.className = 'todo-item';
newListItem.innerHTML = newItem + '<span class="remove"></span>';
list.insertBefore(newListItem, document.querySelector('.todo-new'));
document.getElementById('new-item-text').value = "";
}
function removeItem(event) {
if(event.target.className.indexOf('remove') < 0) {
return;
}
var el = event.target.parentNode;
el.parentNode.removeChild(el);
}
function changeTitle() {
var title = prompt("change the title");
}
function handle(e){
if(e.keyCode === 13){
addItem();
}
return false;
}
});
You have to use the keydown event for this like below
document.onkeydown=function(evt){
var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
if(keyCode == 13)
{
//your function call here
}
Try adding this to your set of addEventListeners
document.getElementById('add-item').addEventListener('keydown', handle, false);
I am trying to create a drop down like functionality where a div is shown once somebody starts typing in the input box. I am able to attach mouse click event on the individual elements to select them. But I am not able to select them via pressing enter.
HTML
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
<div class="autofill">
<ul class="autocomplete">
<li class="autocomplete-list">John Doe (San Jose, CA)</li>
<li class="autocomplete-list">Jane Doe (San Francisco, CA)</li>
<li class="autocomplete-list">John Jane (San Carlos, CA)</li>
</ul>
</div>
JQuery
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
if (key != 40 && key != 38) return;
$listItems.removeClass('selected');
if (key == 40) { // Down key
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
$current.addClass('selected');
// When I press enter after selecting the li element
// Does not work :(
$current.on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
// If somebody clicks on the li item
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
// change color on hover
$('li.autocomplete-list').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
);
// When I press enter after selecting the li element
// Does not work :(
$('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
How can I select a particular li element and then take its value when press enter? Here is the JSFiddle
The <li> element doesn't have focus, even though it's selected visually. The text input still has focus.
You need to check for the enter key on the text <input>. Not on the <li>
$('input#example').on('keydown', function (e) {
//...
var key = e.keyCode
if (key == 40) { // Down key
//...
} else if (key == 38) { // Up key
//...
} else if (key == 13) { // Enter key
//... make sure $current is not null
}
//...
}
Also be careful of this statement
if (key != 40 && key != 38) return;
Which will return from the event handler when the enter key is pressed.
Here's a fiddle: http://jsfiddle.net/q1vtwtdp/4/
Jordan P is correct, the handling of the list should all happen within the keydown handler function of the input.
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
$listItems.removeClass('selected');
if (key == 40) { // Down key
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
}
if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
if (key == 13) {
var value = $('.autocomplete-list').html().split('(')[0].trim();
$input.val(value);
$div.hide();
$current = $selected
}
$current.addClass('selected');
});
So you don't need:
$('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
Working JSFiddle
I have a jquery tab panel. This panel contains some user controls like textboxes. My requirement is to set focus on tab when I press Shift+T. This is not happening. I have used the following code.
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$("#tabs").focus();
});
$("#tabs").focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>
I am not sure why you need to complicate it.
Try this demo:
http://jsfiddle.net/lotusgodkk/GCu2D/417/
JS:
$(document).ready(function () {
$(document).on('keydown', function (e) {
var keyCode = e.keyCode;
if ((keyCode == 84) & (e.shiftKey)) {
$('.ui-state-active:visible:first').focus(); //ui-state-active is the class of active tab.
}
});
$('#tabs').tabs();
});
you should try this:
inputs = $("table :input");
$(inputs).keypress(function(e){
if (e.keyCode == 13){
inputs[inputs.index(this)+1].focus();
}
});
i guess might be work for u Click Here
js
$("#status").keydown(function (e) {
if (e.which == 9) {
$("#statuses").html(this.value);
this.value = "";
$("#status").focus();
e.preventDefault();
}
});
first -> remove double qoutes .. they are used for components like input, p etc.
second -> try this code..
$(document).ready(function () {
$('#tabs').keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$('#tabs').focus(); // setting the focus
alert("working"); //test it
});
$('#tabs').focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').focus(); // setting the focus
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>
I want to get keyCode if they are pressed with shift Key,
for ex. I press a and then b. Then I want to store it in one array like this [shiftkey,65,66] please suggest me if this is possible or I am going wrong.
You can try this sanjay:
<input id="down" type="text"/>
var your_array = [];
document.onkeydown = function (e) {
var keyPress;
if (typeof event !== 'undefined') {
keyPress = this.value + String.fromCharCode(e.keyCode);
}
else if (e) {
keyPress = e.which;
}
if(keyPress == '16'){
keyPress = 'shift';
}
your_array.push(keyPress);
alert(your_array);
// returns [shift,65,66];
return false; // Prevents the default action
};
var a = [];
var wait = true;
window.onkeydown = function (e) {
if (wait) {
if (a[0] != e.keyCode) { a[0] = e.keyCode; }
}
wait = false;
window.addEventListener('keyup', key_up, false);
}
function key_up(e) {
a[1] = e.keyCode;
if (a[0] == a[1]) { a = []; }
wait = true;
window.removeEventListener('keyup', key_up, false);
console.log(a);
alert(a);
}
var pressedKeysSeries = [];
$(document).on('keyup', function (e) { pressedKeysSeries = []; });
$(document).on('keydown', function (e) {
if (e.shiftKey && pressedKeysSeries.indexOf(e.key) === -1) {
pressedKeysSeries.push(e.key);
}
console.log(pressedKeysSeries);
});