trex trex - 5 months ago 9
Javascript Question

Move focus to next field if user doesn't change the option

I have a HTML Select list as follows:

<div class="somebox" id="somebox">
<select name="myoptions" id="myoptions">
<option value="1">Some Text 1 </option>
<option value="2">Some Text 2 </option>
<option value="3">Some Text 3</option>
<option value="4">Some Text 4 </option>
</select>
<input type="text" name="somename1" id="somename1">
<input type="text" name="somename2" id="somename2">
</div>


And Have some JavaScript code, which moves the focus to the next element on change of #myoptions.

$("#somebox").on("change", "#myoptions", function(){
$("#somename1").focus()
});


The question is:
- How can I move the focus to the next element if user just clicks on the
select
list, checks other options in the list but doesn't change the option?
(In this case, focus lies there on the same
select
, because user doesn't change the value)

Here is the JSFiddle created.

Note- In our code
tab
key is disabled, so quite hard for user to move the focus to the next element.

Answer

Is this you wanted?

var cc = 0;

$('#somebox').click(function () {
    cc++;
    if (cc == 2) {
        $(this).change();
        cc = 0;
    }
}).change(function () {
    $("#somename1").focus();
    cc = -1;
});

fiddle

I found there is a similar thread talking about this: useful example

Comments