Develop Reference

Custom select (dropdown) don't focusing on first element when active

I'm making a custom dropdown and want to make good keyboard support. How do I get focus on my first LI when the UL visible. Didn't find answer by my self.
I take code from there https://codepen.io/beforesemicolon/pen/abNpjKo
On CodePen focus on first element works. But on my page - no... please, tell me if you know :)
Here is the code:
function DropDown(dropDown) {
const [toggler, menu] = dropDown.children;
const handleClickOut = e => {
if(!dropDown) {
return document.removeEventListener('click', handleClickOut);
}
if(!dropDown.contains(e.target)) {
this.toggle(false);
}
};
const setValue = (item) => {
const val = item.textContent;
toggler.textContent = val;
this.value = val;
this.toggle(false);
dropDown.dispatchEvent(new Event('change'));
toggler.focus();
}
const handleItemKeyDown = (e) => {
e.preventDefault();
if(e.keyCode === 38 && e.target.previousElementSibling) { // up
e.target.setAttribute("aria-selected", "false");
e.target.previousElementSibling.setAttribute("aria-selected", "true");
e.target.previousElementSibling.focus();
} else if(e.keyCode === 40 && e.target.nextElementSibling) { // down
e.target.setAttribute("aria-selected", "false");
e.target.nextElementSibling.setAttribute("aria-selected", "true");
e.target.nextElementSibling.focus();
} else if(e.keyCode === 27) { // escape key
this.toggle(false);
} else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key
setValue(e.target);
}
}
const handleToggleKeyPress = (e) => {
e.preventDefault();
if(e.keyCode === 27) { // escape key
this.toggle(false);
} else if (e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key
this.toggle(true);
} else if (e.shiftKey && e.keyCode === 9) { // tab + shift key
this.toggle(false);
document.getElementById("message_email").focus();
} else if (e.keyCode === 9 ) { // tab key
this.toggle(false);
document.getElementById("message_text").focus();
}
}
toggler.addEventListener('keydown', handleToggleKeyPress);
toggler.addEventListener('click', () => this.toggle());
[...menu.children].forEach(item => {
item.addEventListener('keydown', handleItemKeyDown);
item.addEventListener('click', () => setValue(item));
});
this.element = dropDown;
this.value = toggler.textContent;
this.toggle = (expand = null) => {
expand = expand === null ? menu.getAttribute("aria-expanded") !== "true" : expand;
menu.setAttribute("aria-expanded", expand);
if(expand) {
menu.children[0].focus();
toggler.classList.add('active');
menu.children[0].focus();
document.addEventListener('click', handleClickOut);
dropDown.dispatchEvent(new Event('opened'));
//toggler.blur();
} else {
toggler.classList.remove('active');
toggler.focus();
dropDown.dispatchEvent(new Event('closed'));
document.removeEventListener('click', handleClickOut);
}
}
}
const dropDown = new DropDown(document.querySelector('.message__dropdown'));

Heh... problem was in CSS. Property {transition-duration} was written by me for UL (I mean for changing background color, but I didn't choose {transition-property}).
After I remove {transition-duration} focusing is working well. Oh my God... it tooks fore hours

If the user presses the enter key, perform the same action as clicking the submit in Javascript

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);

get keycode with shiftkey

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);
});

JQuery .focus() event changing DropDown option

I have a selectlist with that is built using jquery inside a grid. When a user enters a key the select list is built, I then call click() and focus() so that I can use the key commands again.
The problem that I have is that .focus() is changing the selection of the select list when fired when it is fired. Has anyone experienced this behaviour before or found a workaround? Thanks in advance
function INTEREST_createPaymentTypeDropDown() {
//Interest specific:
//build a dropdown for the enum
//if the PaymentType input exists
if ($("#PaymentType").length > 0) {
var cellPaymentTypeValue = $("#PaymentType").val();
var selectedOption;
$("#PaymentType").replaceWith("<select id='PaymentType' style='width:95px; height: 20px;' name='PaymentType'></select>");
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
var newoption = $("<option value=\"" + val + "\">" + key + "</option>");
if (val == cellPaymentTypeValue || key == cellPaymentTypeValue) {
//append select to the current value
selectedOption = val;
}
$("#PaymentType").append(newoption);
$("#PaymentType").addClass("t-input");
});
if (selectedOption != null) {
$("#PaymentType").val(selectedOption.toString());
}
}
function INTEREST_setEditField(field) {
if ($("#PaymentType").length > 0) {
// this is where the problem is
$("#PaymentType").click();
}
else {
$(".t-grid-content").find('.t-input').click();
$(".t-grid-content").find('.t-input').select();
}
INTEREST_persistPaymentTypeOnCellChange(field);
}
function INTEREST_persistPaymentTypeOnCellChange(field) {
//keep the value of the enum not the enum index
//in the payment type field
var paymentTypeCell = $(field).parent().children().eq(1);
if ($(paymentTypeCell).html().length == 1) {
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
if ($(paymentTypeCell).html() == val) {
$(paymentTypeCell).html(key);
}
});
}
}
$('td.t-grid-edit-cell', 'div#AccountPayments').live('keydown', function(event) {
if (event.which == 39 || event.which == 9) //Tab or right arrow
{
if ($(this).hasClass('t-last')) {
INTEREST_goToNextRow(this, event);
}
else {
INTEREST_goToRight(this, event);
}
}
else if (event.which == 37 || event.which == 9 && event.shiftKey) //left arrow. Todo: add shift tab
{
if ($(this).hasClass('t-first')) {
INTEREST_goToPreviousRow(this, event);
}
else {
INTEREST_goToLeft(this, event);
}
}
else if (event.which == 40) //down arrow
{
INTEREST_goDown(this, event);
}
else if (event.which == 38) //up arrow
{
INTEREST_goUp(this, event);
}
});
$("#PaymentType").live('click', function(event) {
$(this).focus();
});

Could it be that there's no empty option at the top of the list so that when the click() is called it's causing PaymentType to auto-select the 0th option?

Any working example for Jeditable with onkeyup event?

Currently I am using Jeditable version 1.6.1 in my project. I am trying to use the onkeyup event for validating user entered values in the input text field. When i am trying to use onkeyup event, it is not working. I am not sure whether Jeditable supports this event or not. Could you please help me with this problem?
Regards
PJ

This worked for me.
$.editable.addInputType('dernumber', {
element: $.editable.types.text.element,
plugin: function (settings, original) {
$('input', this).bind('keypress', function (event) {
return numbersOnly(event, false);
});
}
});
$('.loremipsum').editable('http://www.example.com/save.php', {
type : 'dernumber',
cancel : 'Cancel',
submit : 'OK'
});

And this would the the helper method that validates whether or not the key is a number:
var numbersOnly = function (e, decimal) {
var key;
var keychar;
if (window.event) {
key = window.event.keyCode;
}
else if (e) {
key = e.which;
}
else {
return true;
}
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) ) {
return true;
}
else if ((("0123456789").indexOf(keychar) > -1)) {
return true;
}
else if (decimal && (keychar == ".")) {
return true;
}
else
return false;
};

TRY THIS, GOOD LUCK
input.keypress(function(e) {
var key = window.Event ? e.which : e.keyCode
return (key >= 48 && key <= 57)
});
$('td.editable_class', oTable.fnGetNodes()).editable('editable.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
window.location.reload();
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "40px"
});