when I hit "enter" to choose an item from the jquery-autocomplete results, the form submits. Why this happens....
i should get the data in the text field and on second enter the form should submit...
please suggest where to change in autocomplete.js
Thanks in advance
try this:
Find the keydown event on the li, in the autocomplete.js file and then place this line at the end of the keydown`s event handler (it may have some switch statement, you are interested about the 13[ enter key code]),:
return false;
ex:
.keydown(function(e) {
// track last key pressed
lastKeyPressCode = e.keyCode;
switch(e.keyCode) {
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
e.preventDefault();
moveSelect(1);
break;
case 9: // tab
case 13: // return
if( selectCurrent() ){
// make sure to blur off the current field
$input.get(0).blur();
e.preventDefault();
return false; // ADD THIS !
}
break;
default:
active = -1;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){onChange();}, options.delay);
break;
}
})
this will stop the event to further propagate and submit the form.
Related
I have a key press event listener on all direction keyboard keys which is setup when the page loads. I want to disable this event listener when the user reaches the finish line on my maze game. I have attempted to do this (see code below) but when the user reaches the finish line, the event listener remains active and the user can continue to move around the maze.
I would like to do this just using vanilla javascript. Any suggestions you have would be greatly appreciated.
Here is the event listener:
document.addEventListener("keydown", moveCharacter = (e) => {
let currentPos = naviCtrl.currentPosition(DOMstrings.boxes, DOMstrings);
document.querySelector(DOMstrings.timer).innerHTML = "";
const key_code = e.which || e.keyCode;
switch (key_code) {
case 37: //left arrow key
naviCtrl.moveLeft(currentPos, chosenCharacter);
playerCtrl.playerFinished();
break;
case 38: //Up arrow key
naviCtrl.moveUp(currentPos, chosenCharacter);
playerCtrl.playerFinished();
break;
case 39: //right arrow key
// naviCtrl.removeCharacter(DOMstrings);
naviCtrl.moveRight(currentPos, chosenCharacter);
playerCtrl.playerFinished();
break;
case 40: //down arrow key
naviCtrl.moveDown(currentPos, chosenCharacter);
playerCtrl.playerFinished();
break;
}
});
Here is what I have tried:
playerFinished: (currentPos) => {
if (document.querySelector(DOMstrings.characterImg).parentNode.id === 36 || document.querySelector(DOMstrings.characterImg).parentNode.id === "box-36") {
//1. stop player movement
document.removeEventListener("keydown", appController.moveCharacter);
}
},
Use document.removeEventListener("keydown", moveCharacter); since you defined moveCharacter and not navigationController.moveCharacter.
I am not advanced with Javascript. i was hoping for someone to simply explain the process to edit the following code.
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'j' was pressed
choiceID = 1;
break;
case 75: // 'k' was pressed
choiceID = 2;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
If a user wants to replace the click of a mouse with clicking a letter on the Keyboard, eg. Click J for the next question or to select yes, click A. I think that is what this code is doing but I'd like to pull it apart a bit to add or remove letters to complete additional tasks, such as next question etc.
Any help or pointing in the right direction is a help!
In the code you provided pressing 'j' or 'k' answers the current question by setting the choice value and goes to the next page. To add other keyboard presses you would additional cases to the switch using the appropriate keycode. For example, if you wanted 'j' to just go to the next page and 'a' to answer 'Yes', it would be something like this (remove the if(choiceID) section):
Event.observe(document, 'keydown', function keydownCallback(e) {
switch (e.keyCode) {
case 65: // 'a' was pressed
that.setChoiceValue(1, true);
break;
case 74: // 'j' was pressed
Event.stopObserving(document, 'keydown', keydownCallback);
that.clickNextButton();
}
});
You need to track pointed pointed element and call click event of pointed element when the key j is pressed.
var pointedElement;
document.onmousemove = function(e) {
pointedElement = e.srcElement;
}
document.onkeydown = function(e) {
switch (e.keyCode) {
case 74: // 'j' was pressed
pointedElement.click()
break;
}
}
Edit: My answer was just about the idea to change a click element in the whole window with another key but in your case you it is different. I can not help you by just looking this snippet but you need to change switch case block with the same functionality of buttons. What exactly those buttons are doing? You need to call the same functionality of next and previous keys are handling.
This is my jquery code and i want to continue my arrow key function.
$(document).ready(function () {
$('input').keyup(function (e) {
switch (e.keyCode) {
case 37:
// alert('left');
$(this).closest('td').prev().find('input').focus();
break;
case 38:
// alert('up');
$(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
break;
case 39:
// alert('right');
$(this).closest('td').next().find('input').focus();
break;
case 40:
// alert('down');
var checkRow = $(this).closest('tr').index() + 1;
var totalRows = $(this).closest('tbody').find('tr').length;
if (checkRow == totalRows)
{
//here's my additional table row
var add= $(this).closest('tr').clone().appendTo($(this).closest('tbody').parent());
//i want to continue arrows key for additional textbox in my new row.
}
$(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
break;
} }); });
You don't add keyup event to newly created inputs. Instead of $('input').keyup(fn) which adds event only to existing inputs use $(document).on('keyup', 'input', fn). It listens to the document and triggers when it reaches every input selector. Examples in API documentation.
I'd like to pass the value of a text input into a switch statement when the user presses the enter button. I'd like to do this without using a button to submit. I have a short list of commands the user can enter into the text field, and the result of the switch statement simply logs to the console for now.
EDIT: I should also mention that I'm trying to build this using pure JS.
var cmdValue = document.getElementById('cmdLine').value;
switch(cmdValue){
case "jump":
console.log("FTL Jump to new system: SUCCESS");
break;
case "refuel":
console.log("Refuel: SUCCESS");
break;
case "repair":
console.log("Repair: SUCCESS");
default:
console.log("Command not recognized");
}
Here is the Fiddle
In Jquery...
$(document).keypress(function(e) {
if(e.which == 13) {
//whatever
}
});
JSFiddle
This is more or less what you want. You'll need to attach an event handler to the input and pass it a function containing your switch statement logic:
window.onload = function() {
var cli = document.getElementById('cmdLine');
// Add event listener on the 'keyup' event to execute the command
cli.addEventListener('keyup', executeCommand);
function executeCommand(e) {
var cmdValue = cli.value; // get the current value of the cli
if (e.keyCode === 13) { // if key equals 'enter'
switch(cmdValue){
case "jump":
console.log("FTL Jump to new system: SUCCESS");
break;
case "refuel":
console.log("Refuel: SUCCESS");
break;
case "repair":
console.log("Repair: SUCCESS");
default:
console.log("Command not recognized");
}
}
}
}
You need to register a callback function, which will be invoked whenever a key in keyboard is pressed and your logic has to be in that function (or some other function and invoked from this callback function), like this
document.getElementById("cmdLine").addEventListener('keydown', function (event) {
if (event.keyCode === 13) {
var cmdValue = document.getElementById('cmdLine').value;
switch (cmdValue) {
case "jump":
console.log("FTL Jump to new system: SUCCESS");
break;
case "refuel":
case "repair":
console.log("Refuel: SUCCESS");
break;
default:
console.log("Command not recognized");
}
}
});
Updated jsfiddle
I have an html form.
It uses keyboard navigation (with arrow keys) to move between fields including the enter key.
It periodically needs to prompt the user for acceptance of information.
The enter key is picked up on both the button and in the form field.
Problem: When the user hits ENTER on the accept button it is triggering double events in my form. Shifting the focus 2 fields instead of 1.
I have code that demonstrates exactly what I'm talking about here:
Original Post http://jsfiddle.net/mcraig_brs/UgUUr/1/
Modified Post http://jsfiddle.net/mcraig_brs/UgUUr/2/
Here is the sample HTML:
<button id="myButton">Press Enter On Me</button><br>
<input type="text" id="text1" class="tInput" data-index="0"><br>
<input type="text" id="text2" class="tInput" data-index="1"><br>
<input type="text" id="text3" class="tInput" data-index="2"><br>
<div id="log"></div>
Here is the sample JS:
function log ( data ) {
$('#log').append(data + "<br>");
}
function focusOn(index) {
log("focusOn(index): " + index);
$('input.tInput').eq(index).focus();
}
function focusNext( currentIndex ) {
log("focusNext(currentIndex):" + currentIndex);
focusOn(currentIndex + 1);
}
function focusPrevious (currentIndex) {
log('focusPrevious(currentIndex):' + currentIndex);
focusOn(currentIndex - 1);
}
$('#myButton').on('click', function(e) {
log("event:click #myButton");
focusOn(0);
});
$('input.tInput').on('keyup', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
case 38:
log("event:UP ARROW key in input.tInput");
focusPrevious($(this).data('index'));
break;
case 40:
log('event:DOWN ARROW key in input.tInput');
focusNext($(this).data('index'));
break;
}
});
When I press "ENTER" while the focus is on the button in the current code I get the following output in the log div:
event:click #myButton
focusOn(index): 0
event:ENTER key in input.tInput
focusNext(currentIndex):0
focusOn(index): 1
(At the moment in jsFiddle the only way I can get to the button is to focus on the first text field and shift+tab back to it so it has focus, so that I can press ENTER on it. But in the live code it is automatically focused for the user.)
Question: How can I prevent this type of double event from triggering? I have tried e.stopPropagation() but that did not yield the results I was looking for. When the user pressed ENTER I want the focus to advance only one field.
I have been wrestling with this for a few days so any help would be greatly appreciated. Please note that if a user clicks on the button with the mouse it works properly, it is only the ENTER key that triggers the double event.
Note: I had to modify my question slightly to better convey the constraints.
keyup is triggering the issue, change it to keypress
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
from http://www.quirksmode.org/dom/events/keys.html
keypress
Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup
Fires when the user releases a key, after the default action of that key has been performed.
---- edit ---
To catch key press and keyup both, I would suggest to define it separately, http://jsfiddle.net/UgUUr/3/
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
$('input.tInput').on('keyup', function(e) {
switch (e.which) {
case 38:
log("event:UP ARROW key in input.tInput");
focusPrevious($(this).data('index'));
break;
case 40:
log('event:DOWN ARROW key in input.tInput');
focusNext($(this).data('index'));
break;
}
});
Use keypress event instead:
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
DEMO