tabindex navigation using "enter key" not working in dropdown - javascript

I have used below code for tabindex navigation using "enter key" in html form.It works fine as per my requirement,but this code is not working in dropdown.Please check below code and advise how to do this..
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
event.preventDefault();
}
});

You just need to change your if statement to include the select node as example below.
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT')) {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
event.preventDefault();
}
});
<form>
<input type="text">
<input type="checkbox">
<select>
<option>123</option>
</select>
<input type="radio">
</form>

Related

How to add a value to submitted form using JS

I have the following html code:
<form>
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
.append(window.location.search)
.toString();
event.preventDefault();
document.querySelector('form').submit();
}
});</script>
I have a search data in window.location that I want to add to the submitted value of the form. For instance, the url is:
http://127.0.0.1:5000/result?searchbox=cor
and the value of the form is rnum=10 that I want to combine and make:
http://127.0.0.1:5000/result?searchbox=cor&rnum=10
update 1:
As #Yasir suggested, I replaced the code,
<form style="float: right;">
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
let child = document.createElement('input');
child.name = "searchBox";
child.value = window.location.search.toString();
event.preventDefault();
var form = document.querySelector('form');
form.appendChild(child);
form.submit()
}
});</script>
But still the result is like: http://127.0.0.1:5000/result?rnum=10 for 10 in form.
well, you can create an input node with the desired value within the form and then submit it.
<form>
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
let child = document.createElement('input');
child.name = "searchBox";
child.value = window.location.search.toString();
event.preventDefault();
var form = document.querySelector('form');
form.appendChild(child);
form.submit()
}
});</script>
and if you are looking for updating the page url appending some value from form input
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
event.preventDefault();
if (event.code === 'Enter') {
let input = document.getElementById("rnum");
window.location.search += "&rnum=" +input.value;
}
});</script>
I think you have a syntax error in this part
if (event.code === 'Enter') {
.append(window.location.search)
.toString();// this is an error since we are not appending the string anywhere
event.preventDefault();
document.querySelector('form').submit();
}

jQuery trigger event on multiple fields with the same classname

I have multiple input fields that have the same class name, such as:
<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">
When someone presses ENTER in any field, the text !!! is automatically appended to the value. This works great.
$(document).on('keypress', '.input-name', function(event)
{
if (event.which != 13)
return;
$(this).val($(this).val() + '!!!');
});
The problem is that I'd like to press a button and change the value of all fields, by simulating the ENTER keypress event and for some reason, it only triggers in the first input!
This only triggers in the first input:
var e = $.Event('keypress', { which: 13 });
$('.input-name').trigger(e);
This also only triggers in the first input:
$('.input-name').each(function(i, input)
{
$(input).trigger(e);
});
You can see the problem in this JSFiddle.
Define jquery Event object inside the each function callback as follows.
$('.input-name').each(function (i, input) {
var e = $.Event('keypress', {
which: 13
});
$(input).trigger(e);
});
I would just make a function that does the work and not deal with event handlers
//function alterInps(inps) {
// inps.val(function () { return this.value + "!!!"; });
//}
function alterInps(inps) {
var re = /!!!$/;
inps.val(function () {
return this.value + (re.test(this.value) ? '' : '!!!');
});
}
$(document).on('keypress', '.input-name', function(event) {
if (event.which != 13) return;
alterInps($(this));
});
$('button').on("click", function () {
alterInps($('.input-name'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">
<button type="buton">All</button>
$('.input-name').on('keypress', function(event)
{
if (event.which != 13)
return;
$(this).val($(this).val() + '!!!');
});
$(document).on('click', '#btn-submit', function()
{
var e = $.Event('keypress', { which: 13 });
//$('.input-name').trigger(e);
$('.input-name').each(function(i, input)
{
$(input).trigger(e);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-submit">
Click me
</button>
<input type="text" class="input-name" value="Maria">
<input type="text" class="input-name" value="John">

Unable to manually trigger keydown event with jquery

<form>
<div id="part-inputs">
<div class="part-input">
<label>Part 1</label>
<input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
<input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
</div>
</div>
<input type="submit" name=submit>
</form>
<script>
var nextPartNo = 2;
var template = '<div class="part-input">' +
'<label>Part <%= partNo %></label>' +
'<input type="number" class="start" name="s[<%= partNo -1 %>]" value="" placeholder="start time" tabindex="<%= (partNo-1)*2+1 %>">' +
'<input type="number" class="finish" name="f[<%= partNo -1 %>]" value="" placeholder="finish time" tabindex="<%= (partNo-1)*2+2 %>">' +
'</div>';
var compiledTemplate = _.template(template);
// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 9) { // tab key
var $partInputTargeted = $(event.target.parentElement); // div#part-input
if (!$partInputTargeted.is(':last-child')) {
return;
}
$("#part-inputs").append(compiledTemplate({
partNo: nextPartNo
}));
nextPartNo++;
}
});
// check for enter key at both fields
$("#part-inputs").on('keydown', ['.start', '.finish'], function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 13) { // enter key
console.log("here"); // this verifies we reach the block where we trigger jquery event
event.preventDefault();
var e = jQuery.Event("keydown");
e.which = e.keyCode = 9; // Create tab key event
$(event.target).trigger(e);
}
});
</script>
Above is a snippet of the dynamic form, I am creating. There are multiple units of a start field and a finish field. Each unit is a div#part-input. All div#part-input divs are children of div#part-inputs.
On tab event triggered at finish field of last div#part-input, a new div#part-input will be appended. I am compiling the template using underscore.js( This working as expected)
Now I want enter key at any of the fields(start or finish) to trigger tab event on the same . This where code is not doing anything.
First of all looks like there is a typo in your submit button, missing the quotes around the name prop.
Try this, it should work for what you are looking for. It will trigger if the enter key is pressed while in a finished input. I took out our template adding to it's own function so you can call it in multiple places.
function addTemplate() {
var $partInputTargeted = $(event.target.parentElement); // div#part-input
if (!$partInputTargeted.is(':last-child')) {
return;
}
console.log('add new template');
}
$("#part-inputs .start, #part-inputs .finish").keydown(function (event) {
if (event.which === 13) {
event.preventDefault();
var index = $('input').index(this) + 1;
$('input').eq(index).focus();
if($(this).attr('class') === 'finish') {
addTemplate();
}
}
});
// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 9) { // tab key
addTemplate();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="part-inputs">
<div class="part-input">
<label>Part 1</label>
<input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
<input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
</div>
</div>
<input type="submit" name="submit" />
</form>
If I understand it correctly you want to change focus on next input when user presses enter key. Why don't you directly set the focus with javascript? There is no need to fake keyboard events.
This snippet should help you:
$('input,select').keydown( function(e) { // Add event listener
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) { // If enter key
e.preventDefault();
var inputs = {YOUR INPUTS} // $('.YOUR-SEELCTOR-CLASS').find(':input:visible');
var nextinput = 0;
// Find next input
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
// Handle input focus
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});

Styling the clickedit output

I am using clickedit plugins that edit the label and output the edited text. What I am aiming to do is format the output after clicking and editing the label.
HTML:
<p class="text-center">
<font size="5" color="#38283C">
<b><i><span id="mto-num-detail">KTR-2-KTR2-PR-C-00002</span></i></b>
</font>
</p>
<input class="form-control clickedit" type="text"/>
JavaScript:
// EDIT ON CLICK
var defaultText = 'Click To Input Custom PO Number';
function endEdit(e) {
var input = $(e.target),
p = input && input.prev();
p.text(input.val() === '' ? defaultText : input.val());
input.hide();
p.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
return false;
} else {
return true;
}
})
.prev().click(function () {
$(this).hide();
$(this).next().show().focus();
});
My question is how do I generate the same format as the initial text?
You can create a class in css like
.color-text{ color : #F00;}
And in click event add this class.
$('selector').addClass('color-text');

How to convert enter key press to tab key press, without submitting form

I try to convert enter key press to tab without submitting form, but just can remove submitting form pressing enter...
The view:
<tr>
<td><input type="text" id="tipoContacto1" name="tipoContacto1" class="form-control input-sm" onkeypress="removerEnter(event)"/></td>
<td><input type="text" id="nomeContacto1" name="nomeContacto1" class="form-control input-sm" onkeypress="removerEnter(event)"/></td>
The script:
function removerEnter(e) {
if (e.which == 13) {
//$(e).target.nextSibling;
//$(this).next('input').focus();
e.preventDefault();
}
}
You can do by the following javascript which are as under:
<script type="text/javascript">
$(document).ready(function () {
$("input").not($(":button")).keypress(function (evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit') {
var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
var index = fields.index(this);
if (index > -1 && (index + 1) < fields.length) {
fields.eq(index + 1).focus();
}
return false;
}
}
});
});
</script>
Don't use onkeypress() function just remove it.
Instead of
iname = $(this).val();
if (iname !== 'Submit')..
better use
itype = $(this).attr('type');
if (itype !== 'submit')..
because val() returns the content of the input-field. Type 'Submit' and the content is submitted on enter.

Categories