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

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [html/javascript] Formular: Tab 'ausführen' (https://www.delphipraxis.net/24811-%5Bhtml-javascript%5D-formular-tab-ausfuehren.html)

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

Ich hab mal wieder nen problem der 'anderen art' :lol: :
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

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

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 :roll:
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.

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)

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

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

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:

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?

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

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.

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

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

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

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

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

man lernt eben ständig dazu und ist nie allwissend :stupid:

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

Zitat:

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 ...