[html/javascript] Formular: Tab 'ausführen'

**c113plpbr**

Ich hab mal wieder nen problem der 'anderen art'

:
Ich habe auf meiner Seite (html/php) ein Formular, mit ein paar Edits. In allen Edits ist eine maximale Anzahl von Zeichen per maxlength, und die Tabulatorreihenfolge per tabindex festgelegt. Nun möchte ich, dass wenn eine Edit 'vollgeschrieben' ist, die nächste (also die nächste vom tabindex aus gesehen) fokusiert wird, also wie wenn die tabulartor-taste gedrückt werden würde.

Ich denke, dass dies mit JavaScript oder VBScript durchführbar ist, nur weis ich nicht so ganz wie ...

thx, Philipp

**himitsu**

Also ich hab hier mal 2 Varianten, die funktionieren.

Das 3. sollte aber das "Beste" sein - nur hab ich im Moment keine Lust/Zeit das komplett auszuarbeiten

Dort müßte z.B. 'ne Schleife rein, wo du alle Objekte durchsuchst und den Wert "tabIndex" mit "i" vergleichst - wenn gleich, dann hast du das gesuchte Objekt.

markieren

Code:

			<script type="text/javascript">

<!--

  function weiter_1(o, z) {

    if (o.value.length == o.maxLength) {

      switch(z) {

        case 1:  document.Forumular_1.Feld_2.focus();  break;

        case 2:  document.Forumular_1.Feld_3.focus();  break;

        case 3:  document.Forumular_1.Feld_4.focus();  break;

        case 4:  document.Forumular_1.Button_1.focus();  break;

      }

    }

  }

//-->

</script>

<form name="Forumular_1" ...>

  <input name="Feld_1" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 1)">

  <input name="Feld_2" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 2)">

  <input name="Feld_3" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 3)">

  <input name="Feld_4" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 4)">

  <input name="Button_1" type="submit" value="Absenden">

</form>

[color=blue]*************************************[/color]

<script type="text/javascript">

<!--

  function weiter_2(o) {

    if (o.value.length == o.maxLength) {

      switch(o.tabIndex) {

        case 1:  document.Forumular_2.Feld_2.focus();  break;

        case 2:  document.Forumular_2.Feld_3.focus();  break;

        case 3:  document.Forumular_2.Feld_4.focus();  break;

        case 4:  document.Forumular_2.Button_1.focus();  break;

      }

    }

  }

//-->

</script>

<form name="Forumular_2" ...>

  <input name="Feld_1" type="text" size="5" maxlength="5" tabindex="1" onkeypress="weiter_2(this)">

  <input name="Feld_2" type="text" size="5" maxlength="5" tabindex="2" onkeypress="weiter_2(this)">

  <input name="Feld_3" type="text" size="5" maxlength="5" tabindex="3" onkeypress="weiter_2(this)">

  <input name="Feld_4" type="text" size="5" maxlength="5" tabindex="4" onkeypress="weiter_2(this)">

  <input name="Button_1" type="submit" value="Absenden" tabindex="5">

</form>

[color=blue]*************************************[/color]

<script type="text/javascript">

<!--

  function weiter_3(o) {

    if (o.value.length == o.maxLength) {

      i = o.tabIndex + 1;

      [color=red]// ***** das hier müsstest du aber noch erstetzen *****[/color]

      o2 = [suche objekt mit tabIndex = i];

      [color=red]// ****************************************************[/color]

      o2.focus();

    }

  }

//-->

</script>

<form name="Forumular_3" ...>

  <input name="Feld_1" type="text" size="5" maxlength="5" tabindex="1" onkeypress="weiter_3(this)">

  <input name="Feld_2" type="text" size="5" maxlength="5" tabindex="2" onkeypress="weiter_3(this)">

  <input name="Feld_3" type="text" size="5" maxlength="5" tabindex="3" onkeypress="weiter_3(this)">

  <input name="Feld_4" type="text" size="5" maxlength="5" tabindex="4" onkeypress="weiter_3(this)">

  <input name="Button_1" type="submit" value="Absenden" tabindex="5">

</form>

(zum Testen kannst'e das ja einfach mal in 'ner HTML-Datei abspeichern)

**c113plpbr**

Die gleiche idee hatte ich auch ... nur mir stellt sich hier nun ein Problem:

markieren

Code:

			<html>

<head>

<script language="javascript">

<!--

function focusnext(comp)

{

   var i = 0;

   if(comp.value.length == comp.maxLength)

   {

      while (i < 100)

      {

         if(comp.form.elements[i])

         {

            alert('tabindex: ' + comp.form.elements[i].tabindex);

            if(comp.form.elements[i].tabindex == comp.tabindex + 1)

            {

               comp.form.elements[i].focus();

               break;

            }

         }

         else

         {

            alert('fehler: kein entsprechendes element gefunden!');

            break;

         }         

         i++;

      }

   }

}

//-->

</script>

</head>

<body>

  <form name="form1" method="post" action="">

    <input type="text" name="textfield1" onkeypress="focusnext(this);" maxlength="2" tabindex="1">

    <input type="text" name="textfield2" onkeypress="focusnext(this);" maxlength="3" tabindex="3">

    <input type="text" name="textfield3" onkeypress="focusnext(this);" maxlength="1" tabindex="2">

    <input type="text" name="textfield4" onkeypress="focusnext(this);" maxlength="5" tabindex="5">

    <input type="text" name="textfield5" onkeypress="focusnext(this);" maxlength="4" tabindex="4">

    <input type="button" name="Submit" value="Submit">

  </form>

</body>

</html>

problematisch ist dabei diese Zeile:

markieren

Code:

if(comp.form.elements[i].tabindex == comp.tabindex + 1)

weder "comp.form.elements[i].tabindex" noch "comp.tabindex" gibt einen Wert zurück (wie man aus dem alert schliessen kann), was zum problem wird. Weis jemand wie ich die entsprechende werte doch noch herausfinden kann?

**himitsu**

Ich weis jetzt nicht, wie es wirklich geschrieben wird - konnte es auch nicht in meiner JavaScriptReferenz finden und hab jetzt nich wirklich Lust/Zeit alles zu testen, aber versuch es mal mit comp.tabIndex - meistens wird es ja so gehandhabt.

Und da bei JavaScript auch auf die Groß/Kleinschreibung geachtet wird, muß diese auch stimmen.

Und dann ist "comp.form.elements[i]..." glaube auch nicht richtig
Ich vermut mal, das es mehr in dieser Richtung "document.form1.elements[i]... " aussehn sollte.

**c113plpbr**

arrgh! daher mag ich kein c/c++ ... und auch kein java ... ^^ jetzt funktionierts:

markieren

Code:

			<html>

<head>

<script language="javascript">

<!--

function focusnext(comp)

{

   var i = 0;

   if(comp.value.length == comp.maxLength)

   {

      while (i < 100)

      {

         if(comp.form.elements[i])

         {

            if(comp.form.elements[i].tabIndex == comp.tabIndex + 1)

            {

               comp.form.elements[i].focus();

               break;

            }

         }

         else

         {

            break;

         }

         i++;

      }

   }

}

//-->

</script>

</head>

<body>

  <form name="form1" method="post" action="">

    <input type="text" name="textfield1" onkeypress="focusnext(this);" maxlength="2" tabindex="1">

    <input type="text" name="textfield2" onkeypress="focusnext(this);" maxlength="3" tabindex="3">

    <input type="text" name="textfield3" onkeypress="focusnext(this);" maxlength="1" tabindex="2">

    <input type="text" name="textfield4" onkeypress="focusnext(this);" maxlength="5" tabindex="5">

    <input type="text" name="textfield5" onkeypress="focusnext(this);" maxlength="4" tabindex="4">

    <input type="button" name="Submit" value="Submit">

  </form>

</body>

</html>

@himitsu: "comp.form.elements[i]..."
das stimmt so, da 'form' die übergeordnete form der komponente übergibt, in der ich dann die elemente duchsuchen kann ...

danke, Philipp

**himitsu**

achso,wuste nicht, dass sowas auch geht. Dachte dafür war xxx.parent oder sowas in der Art da

man lernt eben ständig dazu und ist nie allwissend

**c113plpbr**

Zitat von himitsu:

achso,wuste nicht, dass sowas auch geht. Dachte dafür war xxx.parent oder sowas in der Art da

Dachte ich auch ... aber so gehts eben auch ... man lernt eben nie aus ... ^^
mit parent gings nämlich irgendwie ned ...

[html/javascript] Formular: Tab 'ausführen'

[html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Re: [html/javascript] Formular: Tab 'ausführen'

Forumregeln

himitsu Registriert seit: 11. Okt 2003 Ort: Elbflorenz 44.376 Beiträge Delphi 12 Athens	#6 Re: [html/javascript] Formular: Tab 'ausführen' 29. Jun 2004, 20:54 achso,wuste nicht, dass sowas auch geht. Dachte dafür war xxx.parent oder sowas in der Art da man lernt eben ständig dazu und ist nie allwissend Ein Therapeut entspricht 1024 Gigapeut.
	Zitat

c113plpbr Registriert seit: 18. Nov 2003 Ort: localhost 674 Beiträge Delphi 2005 Professional	#7 Re: [html/javascript] Formular: Tab 'ausführen' 30. Jun 2004, 13:34 Zitat von himitsu: achso,wuste nicht, dass sowas auch geht. Dachte dafür war xxx.parent oder sowas in der Art da Dachte ich auch ... aber so gehts eben auch ... man lernt eben nie aus ... ^^ mit parent gings nämlich irgendwie ned ... Philipp There is never enough time to do all the nothing you want. HABENWILL
	Zitat