Input erstellen funktioniert nicht - auf Android.

[Shifty]

Hallo Zusammen...

Ich habe eine Tabelle mit einer unbekannten Anzahl Spalten. Die Zeilen dieser Tabelle sollen editierbar sein, heisst bei einem (doppel)klick darauf sollen inputs eingefügt werden.

So weit so gut. Ich habe es sowohl mit innerHTML als auch mit createElement & AppendChild versucht und beides funktioniert am PC (Firefox / Chrome) wunderbar. Wenn ich aber von meinem Android Tablet auf die Seite zugreife (Firefox Mobile / Chrome) bleibt das Script bei der Erstellung des inputs hängen.

  
var activeID = 0;  
var lastID;  
var activeRow = 0;  
var lastRow;  
  
var getColumn = new Array();  
  
function select(id,no,cell) {  
	activeID = id;  
	lastID = id;  
	activeRow = no;  
	lastRow = no;  
	  
	var rowID = "tr" + id;  
	var getRowContent = document.getElementById(rowID);	  
	var getCells = getRowContent.getElementsByTagName("td");  
	  
	document.getElementById(rowID).setAttribute("class","editDataTR");  
	  
	var column = 1;  
	while (getRowContent.getElementsByTagName("td")[column]) {  
		getColumn[column] = getRowContent.getElementsByTagName("td")[column].innerHTML;  
		var name_id = columnNames[column] + id;  
		getRowContent.getElementsByTagName("td")[column].innerHTML = "<input type=\"text\" name=\"" + name_id + "\" id=\"" + name_id + "\" value=\"" + getColumn[column] + "\" class=\"txtEdit\" />";  
		column++;  
	}  
  
	document.getElementById(cell + id).focus();  
	  
}  

Bin noch eher neu bei Javascript, deshalb bin ich nicht sicher ob sich in der Funktion noch Fehler befinden. Aber eigentlich funktioniert das Script auf dem PC ja tadellos, auch Firebug meldet mir keine Fehler. Allerdings ist die Tabletunterstützung der Website essentiell.

Wenn ich etwas anderes als einen Input in die Zelle eintrage (z.B. die Variabel "column") funktioniert es ebenfalls auf dem Tablet, aber das hilft mir wenig weiter...

Kann mir wer weiterhelfen?

[ChrisB]

Hi,

Wenn ich aber von meinem Android Tablet auf die Seite zugreife (Firefox Mobile / Chrome) bleibt das Script bei der Erstellung des inputs hängen.

Ich nehme an, auch diese beiden Mobile-Browser haben JS-Fehlerkonsolen?

MfG ChrisB

[Shifty]

Ich nehme an, auch diese beiden Mobile-Browser haben JS-Fehlerkonsolen?

Leider nein. Man kann sich nicht mal den Quelltext ansehen...

[Ole]

Leider nein. Man kann sich nicht mal den Quelltext ansehen...

Adobe Shadow hilft

Gruß
Ole

[Sven Rautenberg]

Moin!

Ich habe eine Tabelle mit einer unbekannten Anzahl Spalten. Die Zeilen dieser Tabelle sollen editierbar sein, heisst bei einem (doppel)klick darauf sollen inputs eingefügt werden.

Schlechte Idee.

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken. Die Geräte sind aber so freundlich, die typischen Bedien-Interaktionen, die man vom Desktop mit Mausbedienung kennt, bestmöglich auf Touch-Bedienaktionen zu mappen. Deshalb funktioniert es, wenn man mit dem Finger auf einen Link tippt: Der Link wird geöffnet.

Punkt 2: "Doppelklick" funktioniert schon mal gar nicht. Wenn ich auf meinen Android-Phone zweimal auf den Screen tippe, aktiviere ich den Zoom. Diese Aktion dürfte die Website im Browser gar nicht mitbekommen.

Halten wir also fest: Touch-Bedienung erfordert andere Technik, also sollte man auch andere Begriffe verwenden. Viele Touch-Bedienaktionen werden direkt vom OS und vom Browser als Javascript-Event gemeldet, und es kommt nur noch darauf an, den passenden Eventhandler zu triggern.

In diesem Zusammenhang würde ich außerdem empfehlen, ein existierendes Javascript-Framework mit der Arbeit zu beauftragen. jQuery ist verbreitet und ein guter Ansatz, um sich diverse Cross-Browser-Probleme vom Hals zu schaffen, jQuery Mobile erweitert das dann mit spezialisierten Mobile-Dingen, vor allem UI und Touch-Events.

So weit so gut. Ich habe es sowohl mit innerHTML als auch mit createElement & AppendChild versucht und beides funktioniert am PC (Firefox / Chrome) wunderbar. Wenn ich aber von meinem Android Tablet auf die Seite zugreife (Firefox Mobile / Chrome) bleibt das Script bei der Erstellung des inputs hängen.

Manche Browser mögen es nicht, wenn man in Teilen einer Tabelle herumfummelt. Ich würde vermuten, jQuery weiß das und abstrahiert es, sprich: Die Einzeloperation wird ersetzt durch ein Lesen, Verändern und Neuschreiben der gesamten Tabelle.

var activeID = 0;
var lastID;
var activeRow = 0;
var lastRow;

var getColumn = new Array();

function select(id,no,cell) {
activeID = id;
lastID = id;
activeRow = no;
lastRow = no;

var rowID = "tr" + id;
var getRowContent = document.getElementById(rowID);
var getCells = getRowContent.getElementsByTagName("td");

document.getElementById(rowID).setAttribute("class","editDataTR");

var column = 1;
while (getRowContent.getElementsByTagName("td")[column]) {
getColumn[column] = getRowContent.getElementsByTagName("td")[column].innerHTML;
var name_id = columnNames[column] + id;
getRowContent.getElementsByTagName("td")[column].innerHTML = "<input type="text" name="" + name_id + "" id="" + name_id + "" value="" + getColumn[column] + "" class="txtEdit" />";
column++;
}

document.getElementById(cell + id).focus();

}

>   
> Bin noch eher neu bei Javascript, deshalb bin ich nicht sicher ob sich in der Funktion noch Fehler befinden. Aber eigentlich funktioniert das Script auf dem PC ja tadellos, auch Firebug meldet mir keine Fehler. Allerdings ist die Tabletunterstützung der Website essentiell.  
  
jQuery nimmt dir viele der Aufgaben auf sehr einfache Weise ab, die du derzeit mühsam individuell codierst. Vielleicht solltest du mal einen Blick riskieren.  
  
  
 - Sven Rautenberg

[Der Martin]

Hallo,

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken. Die Geräte sind aber so freundlich, die typischen Bedien-Interaktionen, die man vom Desktop mit Mausbedienung kennt, bestmöglich auf Touch-Bedienaktionen zu mappen. Deshalb funktioniert es, wenn man mit dem Finger auf einen Link tippt: Der Link wird geöffnet.

Punkt 2: "Doppelklick" funktioniert schon mal gar nicht. Wenn ich auf meinen Android-Phone zweimal auf den Screen tippe, aktiviere ich den Zoom. Diese Aktion dürfte die Website im Browser gar nicht mitbekommen.

das heißt, die Smartphones mit Touchscreen unterscheiden sich grundsätzlich von Touchscreens oder Touchpads am PC? Denn die sind ja normalerweise so gemacht, dass sie eine Maus emulieren. Also einmal tippen ist Klicken, zweimal tippen ist Doppelklicken, zweimal tippen und nicht sofort loslassen ist Ziehen (Drag). Das geht vom Dragging abgesehen ziemlich intuitiv.

Halten wir also fest: Touch-Bedienung erfordert andere Technik, ...

Soso. Das war mir bisher nicht bewusst. Und wenn du schon sagst:

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken.

... wie interpretiert so ein Gerät denn dann grundsätzlich das kurze Antippen? Ich hätte Stein und Bein geschworen, dass das als Anklicken gilt. Aber ich muss auch gestehen, dass ich noch nie eins von diesen modernen Smartphones oder iPads in der Hand hatte.

Ciao,
 Martin

[Sven Rautenberg]

Moin!

das heißt, die Smartphones mit Touchscreen unterscheiden sich grundsätzlich von Touchscreens oder Touchpads am PC? Denn die sind ja normalerweise so gemacht, dass sie eine Maus emulieren. Also einmal tippen ist Klicken, zweimal tippen ist Doppelklicken, zweimal tippen und nicht sofort loslassen ist Ziehen (Drag). Das geht vom Dragging abgesehen ziemlich intuitiv.

Touchscreens am PC? Bedienen sich irgendwie suboptimal, da wo man hintippt, wird der Mauspfeil hingesetzt, wenn man den Finger auf dem Screen herumwischt, folgt der Pfeil. Und wenn man wohin tippt, dann springt der Pfeil dorthin und "klickt". Was meist nicht toll funktioniert, weil der Touch schlecht mit dem Screen synchronisiert ist, man hat also gerne einen blöden Versatz zwischen Fingertipp- und Mauszeiger-Position, die man beim "Klicken" nicht sofort erkennt. Toll, wenn man auf einer Bildschirmtastatur "herumklicken" muss.

Touchpads am PC (eher: Laptop) zeigen kein Bild, sind also reine Inputgeräte. Ja, hier kann man durch Tippen auch klicken. Aber entweder wischt man den Mauszeiger umher, oder man tippt kurz, was bedeutet, dass der Mauszeiger sich nicht bewegt, sondern an seinem aktuellen Ort "klickt". Gute Pads sind heutzutage auch multitouch-fähig, man kann also die Eingabe auch mit mehr als einem Finger vollführen, um unterschiedliche Aktivitäten auszulösen. Apple hat da wohl einiges an Entwicklung aufzuweisen, und wenn man weiß, was man tun muss, kann man das vermutlich auch sehr effizient für die Steuerung des Geräts einsetzen. Ich bin da eher skeptisch, mir gefällt sowas nicht wirklich. Wenn's geht, will ich meine Maus. Wenn's nicht geht, nehm' ich halt das Touchpad so, wie es ist.

Touchscreens auf Smartphones haben schon grundsätzlich keinen Mauszeiger, den man herumwischen könnte. :) Insofern fällt flach, dass man "am Ort des Mauszeigers klicken" kann - mangels Mauszeiger. Man kann einen bestimmten Punkt des Bildschirms berühren. Kurz, lang, stillhaltend oder bewegt, mit einem oder mehreren Fingern. Das OS macht daraus eventuell tatsächlich "Klicks" auf definierte Elemente des UI, man kann es aber auch sehr individuell programmieren.

Halten wir also fest: Touch-Bedienung erfordert andere Technik, ...

Soso. Das war mir bisher nicht bewusst. Und wenn du schon sagst:

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken.

... wie interpretiert so ein Gerät denn dann grundsätzlich das kurze Antippen? Ich hätte Stein und Bein geschworen, dass das als Anklicken gilt. Aber ich muss auch gestehen, dass ich noch nie eins von diesen modernen Smartphones oder iPads in der Hand hatte.

Ja, einfaches Tippen auf den von einem Link eingenommenen Bildschirmbereich wird diesen Link "anklicken".

Man sollte aber beispielsweise nicht erwarten, dass die Mouse einen Hover-Effekt macht - es gibt ja keine Maus. Bestenfalls kann das Bedienelement den Fokus bekommen, wenn man z.B. bei Android mit dem "Joystick" bzw. Touchgnuppel navigiert.

- Sven Rautenberg

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Aber ich muss auch gestehen, dass ich noch nie eins von diesen modernen Smartphones oder iPads in der Hand hatte.

Da sage noch mal einer, es gäbe ihn nicht, den Yeti.

Qapla'

[HP-User]

Hallo Leute

@@Der Martin:

nuqneH

Aber ich muss auch gestehen, dass ich noch nie eins von diesen modernen Smartphones oder iPads in der Hand hatte.

Da sage noch mal einer, es gäbe ihn nicht, den Yeti.

Als Yeti-Fortbildungsmaßnahme zwei kleine Links:

Elektrisch aufgeladene Kugel.

Ein Spiel glaub aus den 80ern? (Der "schiiieeet" ist echt noch fesseln, grad wenn mehrere Kollegen abends beim Bierchen versuchen sich zu überbieten)

Zu meiner Verteidigung - das Gerät gehört meiner Frau!

Gruß HP-User

[Shifty]

Schlechte Idee.

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken. Die Geräte sind aber so freundlich, die typischen Bedien-Interaktionen, die man vom Desktop mit Mausbedienung kennt, bestmöglich auf Touch-Bedienaktionen zu mappen. Deshalb funktioniert es, wenn man mit dem Finger auf einen Link tippt: Der Link wird geöffnet.

Punkt 2: "Doppelklick" funktioniert schon mal gar nicht. Wenn ich auf meinen Android-Phone zweimal auf den Screen tippe, aktiviere ich den Zoom. Diese Aktion dürfte die Website im Browser gar nicht mitbekommen.

Also das Aufrufen der Funktion bereitet mir keine Probleme, onClick funktioniert wunderbar. Das mit dem Doppelklick bezieht sich auf Desktop Geräte, ich hab mir über die Steuerung durchaus meine Gedanken gemacht und auch das Design so ausgelegt.

Halten wir also fest: Touch-Bedienung erfordert andere Technik, also sollte man auch andere Begriffe verwenden. Viele Touch-Bedienaktionen werden direkt vom OS und vom Browser als Javascript-Event gemeldet, und es kommt nur noch darauf an, den passenden Eventhandler zu triggern.

Echt? Ich habe gerade vor ein paar Wochen eine Aussage von den Firefox Mobile Entwicklern gelesen, dass sie an mobilen Sonderlösungen gar keine Freude haben und auch von Dingen wie WebKit nichts halten. Aber ich werde mir jQuery sicher mal ansehen, danke.

Manche Browser mögen es nicht, wenn man in Teilen einer Tabelle herumfummelt. Ich würde vermuten, jQuery weiß das und abstrahiert es, sprich: Die Einzeloperation wird ersetzt durch ein Lesen, Verändern und Neuschreiben der gesamten Tabelle.

Ich glaube nicht, dass das bei mir so eine gute Lösung wäre. Es können schnell mal (ein paar) tausend Zeilen werden, die allerdings nicht auf mehrere Seiten aufgeteilt werden sollten.

Und wie gesagt, wenns keine Inputs sind funktioniert es tadellos. Als das Script noch "statischer" war (mit einer festen Anzahl an Spalten, also konnte ich die innerHTML Befehle den Zellen genau zuweisen), hat es selbst mit Inputs funktioniert. Vielleicht versuche ich mal jeder Zelle eine ID zu geben, aber eigentlich würde ich das lieber verhindern.

Gruss