javascript - Tab cursor when character inputed -
javascript - Tab cursor when character inputed -
here js fiddle example:
http://jsfiddle.net/t3u8q5vr/1/
html:
<input type="text" maxlength="1" size="1" /> <input type="text" maxlength="1" size="1" /> <input type="text" maxlength="1" value="e" tabindex="-1" size="1" readonly /> <input type="text" maxlength="1" size="1" /> <input type="text" maxlength="1" value="r" tabindex="-1" size="1" readonly /> <input type="text" maxlength="1" size="1" /> <div> <button class="buttons">á</button> <button class="buttons">é</button> <button class="buttons">í</button> <button class="buttons">ó</button> <button class="buttons">ú</button> <button class="buttons">ñ</button> <button class="buttons">ü</button> </div>
js:
$("input").bind("input", function () { var $this = $(this); if ($this.val().length >= parseint($this.attr("maxlength"), 10)) { var nextempty = $this.nextall("input[value=''], input:not([value])")[0]; if (nextempty) { nextempty.focus(); } } }); $('input').focus(function(){ $(this).addclass('active').siblings('.active').removeclass('active') }); $(".buttons").click(function () { var cntrl = $(this).html(); $('input.active').val(cntrl); var $curinputnode = $('input.active'); while($curinputnode.is('input:text') && $curinputnode.val() != ''){ $curinputnode = $curinputnode.next(); } $curinputnode.focus(); });
the above jsfiddle i've been working on has desired behavior want apply website (it auto tabs when character inserted via keyboard or via clicking 1 of buttons insert text).
when apply code website though, single button click (for illustration á) inserts 2 of á characters:
any thoughts on why occuring?
javascript jquery html
Comments
Post a Comment