[Erledigt] JQ nächstes Input in den Fokus...

drsoong · 24.06.2011, 18:51

Hi

in einer Tabelle sind zwei Spalten: Links ein Bezeichner, rechts ein Textinput.
Bei Eingabe der Entertaste soll, der Fokus auf das nächste Inputfeld gesetzt werden. Mit folgendem Code verbleibt der Fokus leider im aktuellen Feld.

Code:

$('#locationsTable input[type=text]').focus(function() {
                $(this).toggleClass('inputActive');
            })
            .keyup(function(event) {
                if (event.keyCode == 13) {
                $(this).next('input').focus();
                }
            })
            .blur(function() {
                $(this).toggleClass('inputActive');
            })

Wie muß ich es richtig machen?

rudygotya · 24.06.2011, 19:17

Deine Struktur wär jetzt noch praktisch gewesen.
Von der Beschreibung her getippt:

PHP-Code:

  $('#locationsTable input[type=text]')
    .keyup(function(event) {
        if ( event.which == 13 )  {
            $(this).parent().next().find("input").first().focus();
        }
})

=> http://api.jquery.com/event.which/

drsoong · 24.06.2011, 21:05

Vielen Dank an rudygotya. Haut so leider nicht hin. Dachte, die Struktur ergibt sich vollständig aus Beschreibung, Selektor etc.
However, habe es nach vielem Fummeln und lesen so hingekriegt:

Code:

item = $('#locationsTable input[type=text]').index($(this)) + 1;
                $('#locationsTable input[type=text]').get(item).focus();

Das setzt den Fokus auf das nächste Textinput in der Tabelle.

tr0y · 26.06.2011, 13:19

Das geht kürzer:

Code:

$('#locationTable :text').eq( $('#locationTable :text').index(this) + 1 ).focus();

komplett:

Code:

$(document).ready( function() {

   $('#locationTable :text').keyup( function(event) {
      if ( event.which == 13 ) $('#locationTable :text').eq(
         $('#locationTable :text').index(this) + 1
      ).focus();
   });

});

Das "größte" Problem hierbei ist, das du inputs selectest die innerhalb von anderen Objekten liegen, allerdings nicht als sich selbst folgende Elemente. Dadurch sperrt sich der Scope des Elements ( this ) in ein Set ein das nur das eigene Element enthält.

Ich schätze eine "bessere" und kürzere Lösung als unsere, wird es für diesen Fall nicht geben, es sei denn du kannst auf die umliegenden Elemente verzichten.

Bei der Methode ist die Struktur nahezu egal die dort vorliegt, da das selector-Set benutzt wird um durch die Elemente zu navigieren.

Nachtrag:

Vielleicht nicht ganz unwichtig: Du solltest in jedem Fall den TabIndex des HTML-Elements auchnoch analysieren bevor du den Focus aufs nächste Input springen lässt. Aus sicht des Userhandlings ist es wohl ungewohnt wenn die Entertaste woanders hinspringt als die Tabtaste.. Zusätzlich zu dem Check sollte außerdem geprüft werden ob das Feld das du dort focussen willst überhaupt aktivierbar ist ( enabled / disabled ). Prinzipiell wäre es klüger im Event für die Entertaste einfach den Tab-Sprung zu triggern, natürlich nur für den Fall das beide Tasten das selbe verhalten vollziehen sollen.

Alternativ dazu könnte die Tab-Taste immer jedes Input-Feld in seiner Focus-Schleife haben, die Entertaste dann für den jeweiligen Feld-Typ ( :text -> next(), :checkbox -> toggle, :button -> push, ... ) einzigartigen Verhaltensmodus.

Außerdem: wenn du get( number ) benutzt verlässt du die jQuery Instanz und greifst entsprechend nurnoch auf die "echten" JS-Methoden ( in dem Fall focus() zu ), eq( number ) tut das nicht, es gibt weiterhin ein jQuery-Objekt mit dem gewünschten Therm des Sets zurück.

Siehe: http://api.jquery.com/eq/ + http://api.jquery.com/get/

drsoong · 26.06.2011, 16:00

Hi tr0y,

danke. Das ist ja ein umfangreiche, sehr gute Antwort. Ich sitze hier gerade bei Oma zum Kaffee, kann also nicht mega recherchieren. Das letzte, was ich zum Thema key-triggern weiß, ist das das nur beim IE geht. Wie würdest Du denn den tab triggern?

tr0y · 26.06.2011, 16:31

Zitat:

Zitat von drsoong

Hi tr0y,

danke. Das ist ja ein umfangreiche, sehr gute Antwort. Ich sitze hier gerade bei Oma zum Kaffee, kann also nicht mega recherchieren. Das letzte, was ich zum Thema key-triggern weiß, ist das das nur beim IE geht. Wie würdest Du denn den tab triggern?

http://forum.jquery.com/topic/simula...eypress-events

wie dort auch sicher beschrieben ist:
1. Key Event erzeugen
2. Key Event konfigurieren
3. trigger() Key Event übergeben

fertig.

Soweit mir bekannt cross-browser-patible

drsoong · 26.06.2011, 17:29

Nochmals danke. Habe mir folgendes aus der jq-doku rauskopiert. Das sollte helfen das Drücken von Tab zu triggern.

Code:

// Create a new jQuery.Event object with specified event properties.
  var e = jQuery.Event("keydown", { keyCode: 64 });

  // trigger an artificial keydown event with keyCode 64
  jQuery("body").trigger( e );

Wenn man das Event einmalig deklariert, verkürzt sich der Code nochmal drastisch.

drsoong · 27.06.2011, 12:56

Habe die letzte Lösung heute mal gestestet.

Code:

// Create a new jQuery.Event object with specified event properties.
  var e = jQuery.Event("keydown", { keyCode: 64 });
 
  // trigger an artificial keydown event with keyCode 64
  jQuery("body").trigger( e );

Die funktioniert gar nicht d. h. kein Tab-Sprung wird getriggert.

Zudem mußte ich feststellen, dass meine einzige bisher funktionierende Lösung ...

Code:

item = $('#locationsTable input[type=text]').index($(this)) + 1;
                $('#locationsTable input[type=text]').get(item).focus();

...nicht im IE (8,9 gestestet) läuft. Na so ein Käse. Wieso ist dieser verdammte, minderwertige Browser bloß immer noch so wichtig? Na und die eigentliche Frage. Kennt jemand eine Lösung, die ganz bestimmt cross-browser läuft.

@tr0y: Das hier

Code:

$('#locationTable :text').eq( $('#locationTable :text').index(this) + 1 ).focus();

funktioniert leider auch in keinem Browser.

Nachtrag: Muß mich korrigieren, nachdem ich die Schreibweise meines Selektors noch mal geprüft habe. Also, tr0ys Lösung läuft doch, sogar im IE allerdings setzt diese Lösung jetzt dummerweise - und nur im IE - die css Klasse auf das Vorgänger Element (und beläßt die auch dort) statt dem Aktuellen. Gibt's da vielleicht nochmal einen Hinweis?

tr0y · 27.06.2011, 14:02

Wär schön wenn du den "Source wie ich ihn jetzt habe" mal posten würdest, einschließlich zugrundeliegendem HTML Snippet. Damit ich mir das mal im IE anschauen kann. Was das tab-triggern angeht, probier ich mal gleich was durch, ich hatte das nur aus Bookmarks heraus gepostet was das triggern von Tabs angeht.

drsoong · 27.06.2011, 14:34

OK, vielen Dank.

Das hier ist der Startschuss, der getInputFields aufruft.

Code:

$('#selectQuarters label').click(function(event) {
       clearRadioAndLabels('#selectQuarters label');
       $("#" + $(this).attr('for')).attr('checked','checked');
       $(this).addClass('active');
        getInputFields();
    });

getInputFields lädt per ajax die inputfelder samt einer sie beinhaltenden Tabelle nach. Die Ereignisse für die Inputs binde ich nach ajax:success

Code:

function getInputFields() {
    
    $('#inputContainer').html('<img class="preload" src="images/preload_01.gif" alt="Retrieving data..." />');
        $.ajax({
        type: 'POST', 
        url: 'ajax/data_provider_02.php',
        data: $('#selectInterface').serialize(), 
        success: function(data) {
        $('#inputContainer').html(data);
        //****make late event assigment when ajax data have been loaded
            $('#locationsTable input[type=text]').focus(function() {
                $(this).toggleClass('inputActive');
            })
            .keydown(function(event) {
                
                if ( event.which == 13 || event.keyCode == 13)  {
                
                //item = $('#locationsTable input[type=text]').index($(this)) + 1;
                //$('#locationsTable input[type=text]').get(item).focus();
                
                $('#locationsTable :text').eq( $('#locationsTable :text').index(this) + 1 ).focus();
                /*
                if (checkBrowserName('MSIE')) {
                    
                        
                        $('#locationsTable :text').index((this) + 1 ).attr('class','inputActive');
                        
                    
                }
                */
                }
            })
            .blur(function() {
               
                $(this).toggleClass('inputActive');
                
            })
        //*******late event assignment STOP
        
        },
        error: function() {
        $('#inputContainer').html('<p>An error has occured ! Please try again or contact the system administrator.</p>');
        }
        });
}

Und hier das HTML-Snippet.

Code:

<div id="locationsTableDiv">
<p class="dataHeader rounded">Please input your data</p>
<table id="locationsTable">
<tbody>
<tr>
<td class="loc l40 ">Estonia</td>
<td class="loc l40 " style="text-indent: 0; padding:0;">
<input id="input_39_21_1_2011_Orders_a" class="" type="text" value=""></td>
</tr>
<tr>
<td class="loc l40 ">Latvia</td>
<td class="loc l40 " style="text-indent: 0; padding:0;">
<input id="input_40_21_1_2011_Orders_a" type="text" value=""></td>
</tr>
<tr>
<!-- usw. -->
</tbody>
</table>
</div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
input type="image" mit Variable übergeben	de_Joerg	PHP Einsteiger	4	07.05.2011 02:16
Input Array bereinigen - Zeichenkodierung	nutcracker	PHP Tipps 2010	7	19.11.2010 12:55
add/remove input boxen in Formular	newbie88	JavaScript, Ajax und mehr	2	03.03.2010 09:05
Kalender PopUp und Datum nach Input Feld übertragen ( ICEFaces )	da.eXecutoR	JavaScript, Ajax und mehr	6	19.08.2009 16:14
php input feld hinzufügen	bajo	PHP Tipps 2009	4	03.06.2009 18:45
[Erledigt] input 0 frmularproblem	mistermint	PHP Tipps 2009	2	30.03.2009 19:15
Input Färben	mokus	HTML, Usability und Barrierefreiheit	5	08.08.2007 15:29
INPUT RADIO mit INPUT TEXT kombinieren!?!	buggybugga	HTML, Usability und Barrierefreiheit	5	20.02.2007 17:33
Width Problem bei input und text Feld	suter	HTML, Usability und Barrierefreiheit	2	14.02.2007 14:03
Cursorfokus automatisch in ein Input Feld setzen	DDogg	HTML, Usability und Barrierefreiheit	5	17.05.2006 22:48
[Erledigt] Input value und Input text		PHP Tipps 2005-2	4	12.07.2005 16:46
[CSS] input & checkboxen trennen	Igäl	HTML, Usability und Barrierefreiheit	9	11.05.2005 18:52
input durch klick einfügen		PHP Tipps 2005	2	02.05.2005 16:20
[Erledigt] input type's		HTML, Usability und Barrierefreiheit	4	27.03.2005 18:23
Hochkommas in Input Feld		PHP Tipps 2004	3	12.06.2004 15:54

24.06.2011, 18:51
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	[Erledigt] JQ nächstes Input in den Fokus... Hi in einer Tabelle sind zwei Spalten: Links ein Bezeichner, rechts ein Textinput. Bei Eingabe der Entertaste soll, der Fokus auf das nächste Inputfeld gesetzt werden. Mit folgendem Code verbleibt der Fokus leider im aktuellen Feld. Code: $('#locationsTable input[type=text]').focus(function() { $(this).toggleClass('inputActive'); }) .keyup(function(event) { if (event.keyCode == 13) { $(this).next('input').focus(); } }) .blur(function() { $(this).toggleClass('inputActive'); }) Wie muß ich es richtig machen? __________________ Es ist schon alles gesagt. Nur noch nicht von allen.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.06.2011, 19:17
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Deine Struktur wär jetzt noch praktisch gewesen. Von der Beschreibung her getippt: PHP-Code: `$('#locationsTable input[type=text]') .keyup(function(event) { if ( event.which == 13 ) { $(this).parent().next().find("input").first().focus(); } })` => http://api.jquery.com/event.which/ __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

24.06.2011, 21:05
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Vielen Dank an rudygotya. Haut so leider nicht hin. Dachte, die Struktur ergibt sich vollständig aus Beschreibung, Selektor etc. However, habe es nach vielem Fummeln und lesen so hingekriegt: Code: item = $('#locationsTable input[type=text]').index($(this)) + 1; $('#locationsTable input[type=text]').get(item).focus(); Das setzt den Fokus auf das nächste Textinput in der Tabelle. __________________ Es ist schon alles gesagt. Nur noch nicht von allen.

26.06.2011, 13:19
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Das geht kürzer: Code: $('#locationTable :text').eq( $('#locationTable :text').index(this) + 1 ).focus(); komplett: Code: $(document).ready( function() { $('#locationTable :text').keyup( function(event) { if ( event.which == 13 ) $('#locationTable :text').eq( $('#locationTable :text').index(this) + 1 ).focus(); }); }); Das "größte" Problem hierbei ist, das du inputs selectest die innerhalb von anderen Objekten liegen, allerdings nicht als sich selbst folgende Elemente. Dadurch sperrt sich der Scope des Elements ( this ) in ein Set ein das nur das eigene Element enthält. Ich schätze eine "bessere" und kürzere Lösung als unsere, wird es für diesen Fall nicht geben, es sei denn du kannst auf die umliegenden Elemente verzichten. Bei der Methode ist die Struktur nahezu egal die dort vorliegt, da das selector-Set benutzt wird um durch die Elemente zu navigieren. Nachtrag: Vielleicht nicht ganz unwichtig: Du solltest in jedem Fall den TabIndex des HTML-Elements auchnoch analysieren bevor du den Focus aufs nächste Input springen lässt. Aus sicht des Userhandlings ist es wohl ungewohnt wenn die Entertaste woanders hinspringt als die Tabtaste.. Zusätzlich zu dem Check sollte außerdem geprüft werden ob das Feld das du dort focussen willst überhaupt aktivierbar ist ( enabled / disabled ). Prinzipiell wäre es klüger im Event für die Entertaste einfach den Tab-Sprung zu triggern, natürlich nur für den Fall das beide Tasten das selbe verhalten vollziehen sollen. Alternativ dazu könnte die Tab-Taste immer jedes Input-Feld in seiner Focus-Schleife haben, die Entertaste dann für den jeweiligen Feld-Typ ( :text -> next(), :checkbox -> toggle, :button -> push, ... ) einzigartigen Verhaltensmodus. Außerdem: wenn du get( number ) benutzt verlässt du die jQuery Instanz und greifst entsprechend nurnoch auf die "echten" JS-Methoden ( in dem Fall focus() zu ), eq( number ) tut das nicht, es gibt weiterhin ein jQuery-Objekt mit dem gewünschten Therm des Sets zurück. Siehe: http://api.jquery.com/eq/ + http://api.jquery.com/get/ __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr. Geändert von tr0y (26.06.2011 um 14:11 Uhr).

26.06.2011, 16:00
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Hi tr0y, danke. Das ist ja ein umfangreiche, sehr gute Antwort. Ich sitze hier gerade bei Oma zum Kaffee, kann also nicht mega recherchieren. Das letzte, was ich zum Thema key-triggern weiß, ist das das nur beim IE geht. Wie würdest Du denn den tab triggern? __________________ Es ist schon alles gesagt. Nur noch nicht von allen.

26.06.2011, 17:29
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Nochmals danke. Habe mir folgendes aus der jq-doku rauskopiert. Das sollte helfen das Drücken von Tab zu triggern. Code: // Create a new jQuery.Event object with specified event properties. var e = jQuery.Event("keydown", { keyCode: 64 }); // trigger an artificial keydown event with keyCode 64 jQuery("body").trigger( e ); Wenn man das Event einmalig deklariert, verkürzt sich der Code nochmal drastisch. __________________ Es ist schon alles gesagt. Nur noch nicht von allen.

27.06.2011, 12:56
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Habe die letzte Lösung heute mal gestestet. Code: // Create a new jQuery.Event object with specified event properties. var e = jQuery.Event("keydown", { keyCode: 64 }); // trigger an artificial keydown event with keyCode 64 jQuery("body").trigger( e ); Die funktioniert gar nicht d. h. kein Tab-Sprung wird getriggert. Zudem mußte ich feststellen, dass meine einzige bisher funktionierende Lösung ... Code: item = $('#locationsTable input[type=text]').index($(this)) + 1; $('#locationsTable input[type=text]').get(item).focus(); ...nicht im IE (8,9 gestestet) läuft. Na so ein Käse. Wieso ist dieser verdammte, minderwertige Browser bloß immer noch so wichtig? Na und die eigentliche Frage. Kennt jemand eine Lösung, die ganz bestimmt cross-browser läuft. @tr0y: Das hier Code: $('#locationTable :text').eq( $('#locationTable :text').index(this) + 1 ).focus(); funktioniert leider auch in keinem Browser. Nachtrag: Muß mich korrigieren, nachdem ich die Schreibweise meines Selektors noch mal geprüft habe. Also, tr0ys Lösung läuft doch, sogar im IE allerdings setzt diese Lösung jetzt dummerweise - und nur im IE - die css Klasse auf das Vorgänger Element (und beläßt die auch dort) statt dem Aktuellen. Gibt's da vielleicht nochmal einen Hinweis? __________________ Es ist schon alles gesagt. Nur noch nicht von allen. Geändert von drsoong (27.06.2011 um 13:08 Uhr).

27.06.2011, 14:02
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Wär schön wenn du den "Source wie ich ihn jetzt habe" mal posten würdest, einschließlich zugrundeliegendem HTML Snippet. Damit ich mir das mal im IE anschauen kann. Was das tab-triggern angeht, probier ich mal gleich was durch, ich hatte das nur aus Bookmarks heraus gepostet was das triggern von Tabs angeht. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.