| Autor |
Nachricht |
astride
Threadersteller
Dabei seit: 29.11.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 14:52
Titel Navigation mit Pfeiltasten: is null Fehler und Exception |
  |
|
Hallo allerseits,
ich möchte in einem Dokument mit den Pfeiltasten navigieren: bei Pfeil hoch soll der Cursor in das erste InputFeld des letzten Geschwister-divs springen und bei Pfeil runter entsprechend in das erste InputFeld des nächsten Geschwister-divs. Wenn es kein Input gibt, soll der Cursor ins erste Textarea springen. Beim Laden der Seite wird der Cursor mit einer anderen Funktion zuerst ins erste Input auf der Seite gesetzt. Das wäre dann praktisch der Ausgangspunkt.
Das funktioniert auch so weit, nur, wenn ich im letzten Feld nochmal die Pfeil runter Taste drücke, bekomme ich den Fehler "sibling ist null". Wenn ich dann noch öfter die Pfeiltaste drücke, bekomme ich sogar die Exception: "cannot modify properties of WrappedNative". Leider bin ich ziemlich unbedarft in JavaScript: kann mir jemand einen Tipp geben, wie man beides abfangen kann?
Hier mein Code:
| Code: | addLoadEvent(jumpInForm);
function getKeyCode(event) {
event = event || window.event;
return event.keyCode;
}
function jumpInForm() {
if(document.getElementById("patient")){
var patientForm = document.getElementById('patient');
patientForm.onkeydown = function(event) {
var charCode = getKeyCode(event);
divs = document.getElementsByTagName("div");
var parent = document.activeElement.parentNode; //Elternelement von aktuellem
while(parent.className.indexOf("formrow")< 0 ){
parent = parent.parentNode;
}
if(charCode == 40){ //Pfeil runter
var sibling = parent.nextSibling; //nächstes Geschwister von Elternelement
while(sibling.nodeType!=1){
if(sibling != null){
sibling=sibling.nextSibling;
}
}
}else if(charCode == 38){ //Pfeil hoch
var sibling = parent.previousSibling; //letztes Geschwister von Elternelement
while(sibling.nodeType!=1){
if(sibling != null){
sibling=sibling.previousSibling;
}
}
}
if(sibling.getElementsByTagName("input").length >0){ //erstes Input type text von Geschwister, falls vorhanden
var siblingInputs = sibling.getElementsByTagName("input").length;
for(i = 0; i < siblingInputs; i++){
if(sibling.getElementsByTagName("input")[i].type=="text"){
sibling.getElementsByTagName("input")[i].focus();
break;
}
}
}else if(sibling.getElementsByTagName("textarea").length >0){ //ansonsten erstes textarea von Geschwister, falls vorhanden
var siblingInputs = sibling.getElementsByTagName("textarea").length;
for(i = 0; i <= siblingInputs; i++){
sibling.getElementsByTagName("textarea")[i].focus();
break;
}
}
}
}
} |
Vielen Dank im Voraus!
Astrid
[Bitte CODE-Tags verwenden]
Zuletzt bearbeitet von Kash am Mo 29.11.2010 16:03, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 15:14
Titel
|
|
|
|
Lass es sein. Dafür gibt's den Tabindex.
|
|
| |
|
|
|
Anzeige
|
|
|
astride
Threadersteller
Dabei seit: 29.11.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 15:18
Titel
|
|
|
Vielen Dank für die wahnsinnig hilfreiche Antwort: der Tabindex macht leider nicht das, was ich erreichen möchte: hast Du es gelesen? Ich wäre froh, wenn mir jemand einen Tipp geben könnte, wie das Problem, das ich habe, gelöst werden kann, statt mich darüber zu belehren, dass sowieso alles sinnlos ist, was ich tue.
Viele Grüße!
Astrid
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 15:24
Titel
|
|
|
Der Tabindex macht genau das, was Du erreichen willst. Alles andere ist aus Usability-Sicht totaler Müll. Dein Code ist unstrukturiert, unformatiert, Du verwendest keine Code-Tags und die zugehörige HTML-Quelle fehlt auch 
|
|
| |
|
|
astride
Threadersteller
Dabei seit: 29.11.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 15:50
Titel
|
|
|
Das zugehörige HTML wird dynamisch gemacht und ist umfangreich. Das Prinzip ist so: innerhalb eines form gibt es abwechselnd divs mit class="formrow even" bzw. "formrow odd". Innerhalb dieser divs gibt es eine unbekannte Menge von anderen divs und Input-Feldern. Ich möchte also aus einem beliebigen dieser Inputfelder mit der Pfeiltaste in das jeweils erste Inputfeld des nächsten oder vorherigen divs mit der Klasse formrow kommen.
Zur Verdeutlichung ein Bild: http://dl.dropbox.com/u/7960227/Bildschirmfoto%202010-11-29%20um%2014.38.44.png
die divs "formrow" sind die weißen bzw. grünen "Formularreihen".
Es soll also möglich sein, in die jeweils nächste oder letzte Reihe des Formulars zu springen. Trotzdem soll man mit dem Tabulator weiterhin ein Feld vor und zurück kommen.
Gerne kannst Du mir sagen wie man das zusätzlich mit dem Tabindex erreichen kann, statt alles einfach nur als Müll zu bezeichnen: es geht hier darum zu helfen und nicht andere runterzuputzen, oder habe ich was falsch verstanden?
Viele Grüße!
Astrid
|
|
| |
|
|
astride
Threadersteller
Dabei seit: 29.11.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 15:53
Titel
|
|
|
Wäre das also richtig? Sorry, die Code tags hatte ich[/code] nicht gesehen.
| Code: |
<script type="text/javascript" charset="utf-8" defer="defer">
function getKeyCode(event) {
event = event || window.event;
return event.keyCode;
}
function jumpInForm() {
if(document.getElementById("patient")){
var patientForm = document.getElementById('patient');
patientForm.onkeydown = function(event) {
var charCode = getKeyCode(event);
divs = document.getElementsByTagName("div");
var parent = document.activeElement.parentNode; //Elternelement von aktuellem
while(parent.className.indexOf("formrow")< 0 ){
parent = parent.parentNode;
}
if(charCode == 40){ //Pfeil runter
var sibling = parent.nextSibling; //nächstes Geschwister von Elternelement
while(sibling.nodeType!=1){
if(sibling != null){
sibling=sibling.nextSibling;
}
}
}else if(charCode == 38){//Pfeil hoch
var sibling = parent.previousSibling; //letztes Geschwister von Elternelement
while(sibling.nodeType!=1){
if(sibling != null){
sibling=sibling.previousSibling;
}
}
}
if(sibling.getElementsByTagName("input").length >0){ //erstes Input type text von Geschwister, falls vorhanden
var siblingInputs = sibling.getElementsByTagName("input").length;
for(i = 0; i < siblingInputs; i++){
if(sibling.getElementsByTagName("input")[i].type=="text"){
sibling.getElementsByTagName("input")[i].focus();
break;
}
}
}else if(sibling.getElementsByTagName("textarea").length >0){ //ansonsten erstes textarea von Geschwister, falls vorhanden
var siblingInputs = sibling.getElementsByTagName("textarea").length;
for(i = 0; i <= siblingInputs; i++){
sibling.getElementsByTagName("textarea")[i].focus();
break;
}
}
}
}
}
</script>
|
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: 
|
Verfasst Mo 29.11.2010 15:58
Titel
|
|
|
Ich zitiere mich mal selbst aus diesem thread:
http://www.mediengestalter.info/forum/4/formular-mit-pfeiltasten-steuern-141261-1.html
| sahnemuh hat geschrieben: | | Ließe sich sicher per Javascript machen. Allerdings ist diese Idee total sinnfrei und scheitert in der Praxis daran, dass die Pfeiltasten schon für wichtigere Dinge (Oben/Unten für bereits getätigte, vom Browser gespeicherte Eingaben a.k.a "Autovervollständigung"; Links/Rechts für das Verschieben der Zeigerposition innerhalb des Textes) benötigt werden. Du bietest deinen Nutzern also damit keinen Mehrwert sondern behinderst sie bei der gelernten Art der Formularbedienung und enthälst ihnen wichtige Funktionen vor. |
€: Dem Bild nach sieht das Ganze nach einer Anwendung aus - dafür wäre das ganze allerdings mit entsprechender Legende und Schulung wieder sinnvoll.
Zuletzt bearbeitet von sahnemuh am Mo 29.11.2010 16:00, insgesamt 1-mal bearbeitet
|
|
| |
|
|
astride
Threadersteller
Dabei seit: 29.11.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.11.2010 16:04
Titel
|
|
|
ja, Danke: bitte glaubt mir: es ist sinnvoll und für Schulung und Legende ist gesorgt. Irgendwelche Ideen zum Problem?
Viele Grüße!
Astrid
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Fehler in der Navigation [CSS u. HTML]
Navigation mit javascript ausgelagert - wo ist der Fehler
IE7 Navigation Fehler | zweizeilige links werden verschluckt
DwCs3 probleme mit Pfeiltasten
Formular mit Pfeiltasten Steuern
[photoshop] cs5 werte für pfeiltasten ändern?
|
|
Willkommen auf dem Portal für Mediengestalter
