• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] jQuery Datepicker und Touch

mikdoe

mikdoe

Moderator
Tachchen!

Script:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Datepicker und Touch</title>
		<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="https://code.jquery.com/ui/1.8.11/jquery-ui.min.js"></script>
	</head>

	<body>
		<input type="text" id="datum">
		<script>
			jQuery(document).ready(function() {
				jQuery("#datum")
					.datepicker(jQuery.datepicker.regional["de"])
					.focus(function(){ return false; })
				;
			});
		</script>
	</body>
</html>
Problem: es nervt Mega, wenn gleichzeitig mit dem Datepicker auch die Tastatur auf Touchdevices auf geht.

Frage: wie kann ich erreichen, dass die Tastatur nur aufgeht, wenn der Datepicker auch schon auf ist? Das heißt:

  • Datepicker ist zu, Focus kommt, dann: Tastatur bleibt drin und Datepicker geht auf
  • Datepicker ist bereits auf, Focus kommt, dann: Tastatur darf aufgehen, scheinbar will der Benutzer das Datum jetzt mit Tastatur erfassen
Ich nehmen an, dass man da mit dem Focus für das Feld spielen muss aber mein Versuch return false hat überhaupt keine Auswirkung.

Ich bitte um Hilfe und wünsche einen schönen Abend

Nachtrag 1: Vorschläge auf ipad web application: How do I prevent the keyboard from popping up on jquery datepicker - Stack Overflow decken meine beiden Bedingungen nicht ab Aber: wenn es hinzukriegen wäre, dass das Eingabefeld immer dann readonly besitzen könnte, wenn der Picker zu ist und wieder editable wenn er schon auf ist müsste es passen
 
Wie wäre es damit?

HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Datepicker und Touch</title>
		<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="https://code.jquery.com/ui/1.8.11/jquery-ui.min.js"></script>
	</head>

	<body>
		<input type="text" id="datum">
		<script>
			jQuery(document).ready(function() {
				jQuery.datepicker.setDefaults($.datepicker.regional["de"]);
				jQuery("#datum")
					.datepicker({
						beforeShow: function () {
							var jInput = jQuery(this);

							jInput.prop('disabled', true);
							setTimeout(function () {
								jInput.prop('disabled', false);
							}, 50);
						}
					})
				;
			});
		</script>
	</body>
</html>
 
Sehr sehr cool!
Danke dir vielmals!

Ziemlich gut überlegt. Da es keinen "nach öffnen" Schalter gibt, machst du einfach eine 50 ms Verzögerung dafür rein. Hoffentlich passt das in allen Browsern.

Muss ich morgen mal am Desktop durchtesten.
 
Leider zu früh gefreut. :(
Habe das Testen abgebrochen, weil Firefox und Edge trotzdem die Tastatur öffnen.
Aktueller Code:
HTML: 
jQuery('input[name=dp3]')
	.datepicker({
		beforeShow: function() {
			//
			// Touchdevice Abfrage ist nötig, weil man ansonsten im Browser zweimal klicken muss, bevor
			// man etwas per Tastatur eingeben kann
			// Quelle der folgenden Abfrage: http://stackoverflow.com/a/36148629
			//
			if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
				var node = jQuery(this);
				node.prop('disabled',true);
				setTimeout(function() { node.prop('disabled',false); },50);
			}
		}
	})
	.enablePlusMinusInDatePicker('')
;
Selbst ohne die Abfragen auf Touch und/oder mit mehr Zeit (bin bis 500 gegangen) geht trotzdem die Tastatur auf.
Einzig im Opera bleibt die Tastatur zu.

Gibt es noch andere Ansätze?
 
Hab mal was versucht aber nach einmaligem Reinklicken geht der Datepicker garnicht mehr auf. Wo ist mein Denkfehler?

HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Datepicker und Touch</title>
		<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="https://code.jquery.com/ui/1.8.11/jquery-ui.min.js"></script>
	</head>

	<body>
		<input type="text" name="dp3"><br>
		<script>
		jQuery('input[name=dp3]')
			.datepicker({
				beforeShow: function() {
					//
					// Touchdevice Abfrage ist nötig, weil man ansonsten im Browser zweimal klicken muss, bevor
					// man etwas per Tastatur eingeben kann
					// Quelle der folgenden Abfrage: http://stackoverflow.com/a/36148629
					//
					if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
						var node = jQuery(this);
						node.prop('disabled',true);
						setTimeout(
							function() {
								node.prop('disabled',false);
								node.unbind('focus');
								console.log('nach setTimeout lösche onfocus');
							},
							50
						);
					}
				},
				onClose: function() {
					jQuery(this).bind(
						'focus',
						function(){ this.blur(); }
					);
					console.log('onfocus neu setzen');
				}
			})
			.bind('focus',function() { this.blur(); })
		;
		</script>
	</body>
</html>
 
Ich bin mir jetzt nicht sicher, aber müsstest du nicht mit ein klick event arbeiten und event.preventDefault().?

Angenommen:
mikdoe schrieb:
Datepicker ist zu, Focus kommt, dann: Tastatur bleibt drin und Datepicker geht auf
Zum Vergrößern anklicken....
Dann machst du auf das input ein klick event, beim ersten klick wird event.preventDefault() gefeuert, beim 2ten klick nicht mehr.

Ergibt dann:
mikdoe schrieb:
Datepicker ist bereits auf, Focus kommt, dann: Tastatur darf aufgehen, scheinbar will der Benutzer das Datum jetzt mit Tastatur erfassen
Zum Vergrößern anklicken....

Ich weiß allerdings nicht ob ein touch eine klick entspricht.. kein Plan.

Aber ein vom Gefühl her würde sagen. Zuerst wird das input geklickt , mache preventDefault() ... beim 2ten klick nicht mher.
kann mich jetzt auch täuschen mit preventDefault() , dann einfach return false;
 
Der 2te klick wird doch behandelt. nur eben bei ersten mal klick wird preventDeafult gefeuert beim 2ten nicht mehr.

Ich weiß nicht aus welchen Hintergrund die Tastatur geöffnet wird.

Rein theoretisch erfolgt erst der klick, Browser denkt oha input Feld mache Tastatur auf.

Den click auf den input ganz zu canceln ergibt wenig sinn.

Eventuell kann man die Browser austricksen indem man das Attribut auf readonly stellt.

Ich habe einfach mal alle Register gezogen, die mir so eingefallen sind.

Ohne gewär auf Funktionalität
Code: 
<!DOCTYPE html>
<html>
	<head>
		<title>Datepicker und Touch</title>
		<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="https://code.jquery.com/ui/1.8.11/jquery-ui.min.js"></script>
		<script>
			jQuery(document).ready(function() {
                               var wasclicked = false;
				jQuery("#datum").datepicker(jQuery.datepicker.regional["de"]).on("click touchstart", function(e){
					$(this).attr('readonly', 'readonly');
					if(wasclicked === false){
						wasclicked = true;
						e.preventDefault();
						return false;
					}else{
						wasclicked = false;
						return false;
					}
				});
			});
		</script>

	</head>
	<body>
		<input type="text" id="datum">
	</body>
</html>
 
xorg1990 schrieb:
Ich weiß nicht aus welchen Hintergrund die Tastatur geöffnet wird.
Zum Vergrößern anklicken....
Wenn ein Feld den Cursor erhält.

Wo ist denn bei deinem Vorschlag die Touch-Weiche? Nicht-Touch Umgebungen sollen nämlich bleiben wie sie sind.

Und leider funktioniert dein Vorschlag auch nicht. Tastatur geht sofort auf. Müsste man übrigens mit jedem Handy mit Touch nachstellen können. Also ich hab hier nichts was nicht jeder andere auch hat. Das ist keine Sonderlocke sondern nur mal wieder eine Benutzbarmachung von nicht zu Ende gedachten Sachen....ich liebe das :icon8:
 
Wie wäre es hiermit?

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Datepicker und Touch</title>
        <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.8.11/jquery-ui.min.js"></script>
    </head>

    <body>
        Set mobile:
        <input type="radio" name="mobile" value="1" checked> YES /
        <input type="radio" name="mobile" value="0">NO
        <br />
        <br />
        <input type="text" id="datum" readonly />
        <script>
            jQuery(document).ready(function() {
                jQuery.datepicker.setDefaults($.datepicker.regional["de"]);
                jQuery("#datum")
                    .datepicker({
                        showOn: 'both',
                        beforeShow: function () {
                            var jInput = jQuery(this),
                                isMobile = document.querySelector('input[name="mobile"]:checked').value

                            if (isMobile === '1') {
                                jInput.prop('readonly', true).on('touchstart pointerdown', function () {
                                    jInput.prop('readonly', false);
                                    jInput.focus();
                                });
                            } else {
                                   jInput.prop('readonly', false);
                             }
                        },
                        onClose: function () {
                            $(this).off('touchstart pointerdown');
                        }
                    })
                ;
            });
        </script>
    </body>
</html>
 
Also auf meinem Handy gehen Android, Chrome, Opera und Firefox (50.1.0)
Erster touch = Kalender auf
Zweiter touch = Cursor und Tastatur
 
miniA4kuser schrieb:
Also auf meinem Handy gehen Android, Chrome, Opera und Firefox (50.1.0)
Zum Vergrößern anklicken....
Firefox auf Handy kann ich auch bestätigen.

Firefox auf Tablet leider nein. Kann das mit diesen beiden Consolenmeldungen zu tun haben?
Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden. test.html
Zum Vergrößern anklicken....

getPreventDefault() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen defaultPrevented. jquery-1.7.1.min.js:3:6598
Zum Vergrößern anklicken....
 
Diese beiden Consolemeldungen sollten mit deinem Problem nichts zu tun haben.

Ich würde mir ja für die Touchdevice einen anderen Picker suchen. Also die Weiche nicht beim Verhalten vom Picker, sondern bei der Wahl das Pickers. Der andere Picker hätte dann bei touch am Anfang gar kein sichtbares <input>, sondern erst, wenn der Kalender geöffnet wurde.
 
Mit deine Switch von oben:
Code: 
var input = jQuery('input[name=dp3]');
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
	input.datepicker_for_touch(...);
}
else {
	input.datepicker(...);
}
- .datepicker_for_touch musst du dir natürlich erst noch aussuchen.
 
Achso. Also ein ganz neues Script dazu nehmen.
Hmmm, ich überlege ob ich dann den Button sichtbar mache wie das mini im Beispiel auch hatte.
 
Meine Frage ist, wie kann ich auf den Button (Option "showOn:'both'") einwirken, dass bei dessen Nutzung niemals der Fokus in das Feld kommt? Dann könnten Touch User einfach immer den Button nehmen. Und wer die Tastatur will kann stattdessen in das Feld tippen/klicken.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben