Paspaudus "Enter" kursoriaus perkėlimas į kitą langelį

Balandžio 10, 2014

Sveiki,

Visiškai nenusimanau apie JS, o reikia formoje padaryti, kad suvedus į pirmą laukelį informaciją ir paspaudus "Enter", kursorius peršoktų į kitą langelį kaip su "Tab" mygtuku. Radau keletą sprendimų, bet nesugebu jų kažkaip pritaikyti. Tarkim, kad ir šitas:

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>XXX</title>
</head>

<body>
   <script>
       function press(event) {
           if (event.keyCode == 13) {
               document.getElementById('input2').focus();
           }
       }
   </script>

   <input id="input1" type="text" onkeypress="press(event)" /><br />
   <input id="input2" type="text" onkeypress="press(event)" /><br />
   <input  id="submit" type="submit" value='Submit' /><br />
</body>
</html>

Šita forma veikia, bet jeigu laukelius įterpiu į formą "<form></form>", tai viskas nebeveikia. Išbandžiau keletą skirtingų pavyzdžių ir visur ta pati problema. Kas galite padėti išspręsti šitą problemą? O gal turit kažką panašaus pasirašę?

Balandžio 10, 2014

Kai inputai būna formoje, paspaudus enter paprastai forma išsiunčiama. Tiesiog įdėk tokią eilutę event.preventDefault(); ji sustabdo numatytus evento veiksmus

function press(event) {
           if (event.keyCode == 13) {
	event.preventDefault();
               document.getElementById('input2').focus();
           }
}

Redagavo Balandžio 10, 2014 Gugiss

Balandžio 10, 2014

Kai inputai būna formoje, paspaudus enter paprastai forma išsiunčiama. Tiesiog įdėk tokią eilutę event.preventDefault(); ji sustabdo numatytus evento veiksmus
function press(event) {
           if (event.keyCode == 13) {
	event.preventDefault();
               document.getElementById('input2').focus();
           }
}

Super. O kaip dar būtų galima patobulinti, kad peršoktų ne į konkretų lauką, o per visus, kiek jų pridėčiau?

Balandžio 10, 2014

Super. O kaip dar būtų galima patobulinti, kad peršoktų ne į konkretų lauką, o per visus, kiek jų pridėčiau?

Su DOM funkcijomis susirandi, kuris input elementas yra po to, dėl kurio suaktyvuotas click (event.target) ir darai focus jam :)

Balandžio 10, 2014

Patarčiau naudot jQuery:

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>XXX</title>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
   <form id="forma">
<input id="input1" type="text" /><br />
<input id="input2" type="text" /><br />
<input  id="submit" type="submit" value='Submit' /><br />
   </form>

   <script>
$(document).ready(function(){
    $('#forma input, #forma textarea, #forma select').keydown( function(e) {
	if(e.which == 13) {
	    e.preventDefault();
	    var next = $(this).closest('form').find('input:visible, select, textarea');
	    next.eq( next.index(this)+ 1 ).focus();
	}
    });
});
   </script>
</body>
</html>

Redagavo Balandžio 10, 2014 Gugiss

Prisijungti

Paspaudus "Enter" kursoriaus perkėlimas į kitą langelį

Rekomenduojami pranešimai

Mynde 686

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Gugiss 703

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Mynde 686

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Silke 1.407

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Gugiss 703

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Dabar naršo 0 narių

Prisijunk prie bendruomenės dabar!

Naujausios temos

Karštos temos

Veiklos srautas

Skelbimai