Scan data into mvc web app and then change focus
I am writing a small database where I can scan multiple barcodes into different text fields and then save the data. The barcode data may have some variance in length and I would like to move focus to the next textbox after the barcode is complete.
Here is the final code in my view where I give each text field an id and then I use jquery to focus on the next id after the first text field has reached a certain length.
<!--This is for entering the PartNumber-->
<div class="form-group">
@Html.LabelFor(model => model.PartNum,
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextBoxFor(model => model.PartNum,
new { htmlAttributes = new { @class = "form-control", id="focus1"} })
@Html.ValidationMessageFor(model => model.PartNum, "",
new { @class = "text-danger" })
</div>
<!--This is for entering the Aisle-->
<div class="form-group">
@Html.LabelFor(model => model.Aisle,
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextBoxFor(model => model.Aisle,
new { htmlAttributes = new { @class = "form-control",id="focus2" } })
@Html.ValidationMessageFor(model => model.Aisle, "", new { @class = "text-danger" })
</div>
Here is my jquery code
$('input[id=focus').keyup(function () {
if (this.value.length == 2) {
$('input[id=focus2]').focus();
}
});
From what I can tell from the code, this should move focus to the next text field after entering / scanning 2 characters in the first text field, but that doesn't work.
I would like to make a focus change after the variable length barcode is done, but not sure how.
What am I doing wrong in my code that will prevent the focus from changing to the next text field?
source to share
I found that the main problem I was having was I forgot to include $(function(){
at the beginning of my code. The basic solution I was able to work out.
$(function(){
$('#focus1').keyup(function(){
if(!_timeoutRunning){
_timeoutRunning=true;
setTimeout(function(){checkKey();}, 2000);
}
});
});
var _timeoutRunning = false;
function checkKey(){
_timeoutRunning = false;
if($('#focus1').val().length >= 7)
$('#focus2').focus();
}
this code allows you to scan a barcode of 7 or more length, 2 seconds after the 7th character is scanned in it, will change focus to the next id
source to share
Update:
You can try this:
$('input[id*="focus"]').each(function () {
if($(this).val().length >= 2) {
$(this).next().focus();
}
});
I'm not sure about your structure, but jQuery is pretty straight forward. Iterate through each element with a word focus
, if the value is greater than two, move focus to the next element. (May need to be adjusted next to the corresponding item)
Also this will have some overhead since the loop will be executed with each iteration.
I'm not sure if the event will actually happen keyup
. Also, make sure it is equal to two, not equal or greater. You could do the following though:
$('input[id=focus]).change(function (event) {
event.preventDefault();
if($(this).val().length >= 2) {
$('input[id=focus2]').focus();
}
});
You can also scale this code where it automatically grows to the next available id
focus.
source to share