Develop Reference

Keybinding a button that triggers its onclick function

I would like the left and right arrow keys to trigger the back and next button clicks in my Javascript. I feel like I'm not quite implementing it correctly since my buttons work but the keystrokes do not.
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = paths.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == paths.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.keypress(function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.keypress(function (e) {
if (e.which == 39) {
$("#next").click();
}
});
}

You probably want the keydown event.
function init() {
document.getElementById('back').onclick = function() {
console.log('back!');
}
document.getElementById('next').onclick = function() {
console.log('next!');
}
document.addEventListener('keydown', function(e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function(e) {
if (e.which === 39) {
$("#next").click();
}
});
}
init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="back">Back</button>
<button id="next">Next</button>
I guessed which event listener style you'd want (native DOM versus jQuery) because you've got a mix, but this should get you pointed in the right direction.
From experience, if you have more than a very simple use case for handling keypresses, I'd recommend utilizing a library, like Keypress.

Without jquery, try this
document.onkeyup = function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
}
With jquery,
$(document).keypress(function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
});

How can I prevent jQuery smartWizard from moving to the next step on enter press?

I have tried this code but it is not working.
var wizardForm = $('#form');
wizardForm.on('keyup keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});

This article solved my queestion:
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});

Adding off click and esc to close slideToggle

I've got a panel that slides up and pushes content upwards. I'd like to be able to close it using an off click or pressing esc. I've tried adding e.stopPropagation(); and if (e.keyCode == 27) {
EDIT Fiddle: https://jsfiddle.net/pqc77g1f/2/
Here is a fiddle that has off click: http://jsfiddle.net/yKhfP/
$("#toggle").click(function(e) {
if (e.keyCode == 27) { // esc keycode
if ($('#panel').css('display') == 'block') {
var height = '-=' + $('#panel').height();
} else {
var height = '+=' + $('#panel').height();
}
e.stopPropagation();
$("#panel").slideToggle((2300), "easeOutQuint");
$(".project_wrap").animate({
bottom: height
}, (2300), "easeOutQuint")
$('html, body').toggleClass('no-scroll');
});

for escape:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if($('#panel').css === 'block'){
$('#panel').hide(200)
}
}
});
Look into perhaps $.blur for the "off click"

Getting Textbox Cursor Position (Before or After text)

How do I check to see if the cursor position is in the front of the text or the last of the text.
<script type="text/javascript">
$(document).ready(function () {
$('input').keyup(function (e) {
if (e.which == 39 && <CURSOR IS FIRST OR LAST OF TEXT>) {
alert($('input').val);
$(this).closest('td').next().find('input').focus();
$(this).closest('td').next().find('input').select();
}
}
}
<script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input').keyup(function (e) {
if (e.which == 39 && <selected text lenght> > 0) {
$(this).closest('td').next().find('input').focus();
$(this).closest('td').next().find('input').select();
}
else if (e.which == 37) {
$(this).closest('td').prev().find('input').focus();
$(this).closest('td').prev().find('input').select();
}
else if (e.which == 40) {
$(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
$(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').select();
}
else if (e.which == 38) {
$(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
$(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').select();
}
});
});

You can use jQuery Caret plugin. Check this thread here and the plugin's homepage. You can then change your code to:
var pos= $(this).caret().start == $(this).caret().end ? $(this).caret().start : -1;
if (e.which === 39 && (pos === 0 || pos === $(this).val().length)) {
...
Hope it helped,
Shakib

How to stop writing in textbox by using JavaScript

I want to enter only 3 words in a textbox. My JavaScript code is below:
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
});
}
}
As you see, I want to block user to not to enter more than 3 words. If someone knows how to handle this please help.

You can't preventDefault using keyup. Using keydown or keypress should work. Here is the example:
$('#Txt_Report').keypress(function(e) {
if (e.which == 32) {
var count = this.value.split(' ').length;
if (count > 2) {
e.preventDefault();
}
}
});

Use event.preventDefault(); with keydown (as suggested by the comments)
Demo: http://jsfiddle.net/wTvmz/
jQuery('#Txt_Report').keydown(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
event.preventDefault();
}
}
});

Set the disabled attribute to disabled.
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
jQuery('#Txt_Report').attr('disabled', 'disabled');
});
}
}
Ref: http://www.w3schools.com/tags/att_input_disabled.asp

Why not utilize "keypress" and return false?
http://jsfiddle.net/kW9tF/
$('#txt').keypress(function (event) {
return false;
});
Updated code example: http://jsfiddle.net/kW9tF/1/
$('#txt').keypress(function (event) {
var count = $(this).val().split(' ').length;
if (count > 2) {
return false;
};
});