7 svar · 326 visningar · startad av rincewind
Hej alla,
jag försöker flytta mig från ett input fält till ett annat mha javascript.
Målet är att när man har i fyllt klart ett input fält, så vill jag att den ska hoppa till den nästa.
Någon extremt duktig person som vet hur man gör detta?!=)
Exempel:
-----
<input type="text" name="i1" size="1" maxsize="1">
<input type="text" name="i2" size="1" maxsize="1">
<input type="text" name="i3" size="1" maxsize="1">
-----
dvs när man har skrivit ett tecken i i1 så rör den sig direkt över till i2 och när man skrivit in i i2 går den sedan över till i3.
Tacksam för svar!!!
Mvh
-- Rincewind
Välkommen till WF rincewind!
Här är ett exempel. http://www.jojoxx.net/jscript/archive/show.asp?id=21
Men det lättaste i ditt fall kanske är detta:
<form name="myform">
<input type="text" name="i1" size="1" maxsize="1" onkeyup="document.myform.i2.focus()">
<input type="text" name="i2" size="1" maxsize="1" onkeyup="document.myform.i3.focus()">
<input type="text" name="i3" size="1" maxsize="1">
</form>
Ett bättre sätt skulle vara att använda denna kod, eftersom det kan vara irriterande att bli flyttad mellan boxar.
<script>
function checkSize(){
var testStr = document.getElementById("ruta").value;
if( testStr.length >= 5){
// Kom ihåg att första tecknet ligger på position 0!
alert("Femte tecknet i strängen är " + testStr.charAt(4))
}else{
alert("Du måste fylla i minst 5 tecken");
}
}
</script>
<input id="ruta">
<input value="Klicka" type="button" onclick="checkSize();">
Ps. jag tror att du menar "maxlength", där du skriver "maxsize".
Tackar för all hjälp alla!..
Nu kan jag komma vidare i mitt kodande=)..
ps.
Maxlength menade jag ja.. Lite förvirrad idag=)
ds.
Gah!..
Problemen fortsätter att gaddra upp sig här.
Om jag vill vid varje input fält skicka runt det via en funktion som sedan sätter fokus.
Exempelvis:
----------------
<html>
<head>
<script language="javascript">
function movetonext(inPut)
{
// Vill göra massa läckra grejjer här.
// och sedan
document.getElementByID(inPut).focus();
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="1" size="1" MAXLENGTH="1" onkeyup="movetonext(2)" ID="1">
<input type="text" name="2" size="1" MAXLENGTH="1" onkeyup="movetonext(3)" ID="2">
<input type="text" name="3" size="1" MAXLENGTH="1" ID="3">
</form>
</body>
</html>
-------------------------------------------------
Någon som vet?!
Har även förtvivlat försökt hitta information om document.getElementByID och document.all men kan inte hitta något. Inte hittat något i javascript referens manualen.
Någon ninja, som kan ge mig lite bra tips eller tala om för mig hur jag löser detta??
Tackar på förhand,
-- Rincewind
Du är nära. Lite småsaker bara. getElementById skall vara med ett litet 'd', samt att id enligt w3C-rekommendation inte får börja med en siffra. Resultatet blir då:
<html>
<head>
<script language="javascript">
function movetonext(inPut)
{
// Vill göra massa läckra grejjer här.
// och sedan
document.getElementById(inPut).focus();
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="1" size="1" MAXLENGTH="1" onkeyup="movetonext('in2')" ID="in1">
<input type="text" name="2" size="1" MAXLENGTH="1" onkeyup="movetonext('in3')" ID="in2">
<input type="text" name="3" size="1" MAXLENGTH="1" ID="in3">
</form>
</body>
</html>
document.getElementByID och document.all ingår inte i språket JavaScript i sig, utan representerar separata objekt-modeller (som du kan anropa via JavaScript). Den senare är Microsofts egen som använd(e)s i Internet Explorer meddans den första är en w3c-rekommendation som stöds av (bl a) IE, Mozilla och Opera (och varianter av dessa).
Info hittar du bl a här:
http://www.mozilla.org/docs/dom/domref/
http://msdn.microsoft.com/workshop/author/om/doc_object.asp
Tackar IGEN då..
Det här forumet är riktigt bra. Svaren är suveräna=).
En till liten fråga då:
Kan man undersöka vilken tangent som är tryckt på?
Det jag vill göra är att undersöka om man har tyckt på "ta bort ett tecken" knappen. Då vill jag hoppa tillbaka en ruta.
tex:
------------------------------
<html>
<head>
<script language="javascript">
function movetonext(inPutPre,inPutCurrent,inPutNext)
{
// Vill göra massa läckra grejjer här.
// och sedan
if (document.getElementById(inPutCurrent).value = "bakåtsteg");
document.getElementById(inPutPre).focus();
else
document.getElementById(inPutNext).focus();
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="1" size="1" MAXLENGTH="1" onkeyup="movetonext('in1','in1','in2')" ID="in1">
<input type="text" name="2" size="1" MAXLENGTH="1" onkeyup="movetonext('in1','in2','in3')" ID="in2">
<input type="text" name="3" size="1" MAXLENGTH="1" onkeyup="movetonext('in2','in3','in3')" ID="in3">
</form>
</body>
</html>
------------------------------
Någon som vet?
Tackar igen
-- Rincewind