Neuerstellung der HTML5-range-Eingang für Mobile Safari (webkit)?

So, ich arbeite schon an einem HTML5 iPad-Anwendung für die Arbeit und habe auf ein problem stoßen. Ich nicht haben Zugang zu einem iPad während der ersten Arbeit an dieser app und stützte sich auf desktop-Safari, um meine app schnell zusammen (wahrscheinlich nicht die beste Sache, sowieso...)

Bin ich angewiesen auf einen Eingabebereich für einen Teil der Schnittstelle. Nach sehen, dass HTML5 hatte einen Eingangsbereich, war ich froh als diese ist genau das, was ich brauchte. Ich schaffte es sogar es Stil bis zu genau das, was entwickelt wurde:

Das ist großartig! ...bis ich tatsächlich versucht, es auf einem iPad und es funktioniert nicht. Zeigt nur eine Texteingabe. Ich bin jetzt Fragen, was zu tun... dazu brauche ich einen regler, etwas, dass, wenn gezogen, es spuckt die Daten aus. Offensichtlich muss die Arbeit mit touch. Nach einem Blick rund um alle über das web, scheint es nicht zu sein, eine solide Lösung.

Was Sie tun, Jungs schlage vor, hier? Was ist die richtige Art der Codierung eines funktionierenden touch-Screen-Schieberegler, genau wie die native HTML5 ein, dass es nicht unterstützt wird!?

Irgendwelche Ideen/Gedanken/wissen/Erfahrung, wäre sehr dankbar!
James

caniuse.com/#feat=input-range scheint zu widersprechen, dass HTML5-Bereich Eingänge sollte ein problem auf mobilen safari. Es zeigt iOS safari 7.1 und 8.1 kompatibel. Wer Pflege zu kommentieren?

InformationsquelleAutor littlejim84 | 2011-03-30

0

Ich habe genau das gleiche problem, nur mit einem iPhone.

Dies ist, weil Mobile Safari unterstützt nur eine Teilmenge von HTML5. Ich bin mit JqTouch, das ist mir verursachen alle möglichen Probleme also vermeiden, in diesem Rahmen.

Werfen Sie einen Blick auf jquery mobile. Seine derzeit Alpha 3, hat aber ein Schieberegler-Steuerelement, das funktioniert auf iOS.

Hoffe das hilft dir ein wenig.

Ich arbeite derzeit tief mit Backbone JS. Meinst du mit jQuery Mobile nur für ein regler ist zu viel? Ich bin auch gefragt, wenn Sie mit jQuery Mobile wäre eine bessere option für meine Bewerbung im Allgemeinen? Haben Sie viel Erfahrung damit? Kann Backbone JS und jQuery Mobile arbeiten gut zusammen, Frage ich mich?
Wenn Sie nicht möchten, dass das gesamte framework, gehen Sie schnappen Sie den Schieberegler code und alle Abhängigkeiten.
Ich bin derzeit mit der vollständigen jQuery-Mobile-framework mit der Wirbelsäule (ähnlich der "Backbone") und es funktioniert gut. jQuery Mobile angewendet werden können, um Ihre app in bitesize Stücke, so würde ich halten-Backbone als auch für die MVC-features, die es bietet.

InformationsquelleAutor Mike James
13

Getestet habe ich alle die vorgeschlagen "Lösungen" und fand Sie alle fehlen.

Alle sind übermäßig aufgebläht, einige ändern Ihre vorhandene markup-oder Kraft-unnötige CSS-Stile.

So gestaltete ich meine eigene Lösung in 2kb von JavaScript (minified).

Versuchen Sie es (auf Ihrem mobilen Gerät): https://range-touch.herokuapp.com

Code: https://github.com/dwyl/range-touch (prägnant und kommentierte)

Um diese arbeiten in Ihrem eigenen Projekt alles, was Sie tun müssen, ist, gehören die
range-touch.min.js - Datei in Ihre Seite/template.

Magisch <input type="range"> funktioniert auf allen mobilen Geräten.

Können Sie Stil der slider & Knopf, wie immer Sie möchten.

Ich habe Probe Stile in der optional/Stil.css

Hinweis: diese Lösung Übernimmt Sie haben JQuery ~~oder Zepto.js~~

Das ist großartig, Liebe die leichte Lösung und Standard-styles!
Das ist wunderbar, aber die Füllung (grün) bei mir nicht funktioniert mit den neuesten zepto
Genial!!! Gut dokumentiert, gut diskutiert, tolle links und Beispiel und Bilder... Gott ich wünschte, jede Antwort war wie dieser!
danke!!! obwohl ich fügte hinzu, einen Kommentar zu der Frage oben, ich würde gerne für Sie zu läuten an --- ist html5-range-input tatsächlich von iOS unterstützt oder nicht?
auch Ihre nelsonic.s3.amazonaws.com/range-touch/index.html umgeleitet von goo.gl/uWhbzg ist nach unten.

InformationsquelleAutor nelsonic
1

Haben, könnten Sie einen Blick über http://jqueryui.com/demos/slider/ .
Versuchen Sie, auf der Seite auf dem iPad und sehen, ob es touch-freundlich.

Der slider funktioniert bei mir (neueste Mobile Safari), aber nicht schieben. Ich kann nicht ziehen Sie den marker herum, aber es bewegt sich überall dort, wo ich Tippen auf den Schieberegler.
wenn Sie möchten, zu bekommen, jQuery-UI und Touch-Ereignisse arbeiten zusammen, nutzen Sie einfach: touchpunch.furf.com

InformationsquelleAutor Cristian Necula
1

Versuchen Sie, diese one - https://github.com/freqdec/fd-slider. Auch der Tooltipp auf der demo-Seite funktioniert auch auf mobilen safari - http://www.frequency-decoder.com/demo/fd-slider/tooltip/.

frequency-decoder.com angezeigt werden offline. isup.mir/Frequenz-decoder.com haben Sie ein alternative - link für die demo?

InformationsquelleAutor Nickolay Ninarski
0

Gibt es ein Update für rangeinput von jquerytools für touch-Geräte: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js

Funktioniert wie ein Charme!

rangeinput.js nicht für uns arbeiten. haben Sie einen link zu einer demo, wo du diese arbeiten? danke.

InformationsquelleAutor pstadler
0

Fand ich, dass eine sehr leichte Berührung auf Safari mini-tablet (oder Handy), und der regler funktioniert. Wenn Sie nach unten drücken zu hart, Safari Mobile (oder tablet), versucht, um das "auswählen/alles auswählen" Popup-Blase, als ob es ein text-Feld. Auch mit Safari auf meinem tablet oder Handy, dachte, dass wollte ich "verschieben Sie das Fenster um" - ich habe nicht gefunden, eine Lösung für diese Probleme noch nicht. Allerdings habe ich den Schieberegler, um die Arbeit in Safari mit einer "Licht-finger-touch".

Fand ich die folgenden Ressourcen hilfreich sein:

Stift von Aron Woost:
https://codepen.io/aronwoost/pen/nlyrf
Hier ist ein Beispiel von Woost - code:
```
    input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}
```
Daniel Stern:
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Können Sie eine google-Suche auf " How to style Reihe-regler in Webkit
Von Sara Vieira" und finden Sie Ihre Artikel.

Ich hoffe, das hilft.

InformationsquelleAutor user8534699
0

Eine einfache und schnelle LÖSUNG!

Den Eingangsbereich Schieberegler vorgenommen werden können benutzerfreundlich auf einem mobilen Gerät durch entfernen der lästigen highlight-Effekt auf den Schieberegler beim Tippen auf.

Den Fix - Fügen Sie die CSS-Eigenschaft -webkit-tap-highlight-color: transparent an der CSS des Elements oder der komplette html-Seite. Dies wird entfernen Sie das highlight-Effekt auf ein element, wenn es angetippt wird auf einem mobilen Gerät.

InformationsquelleAutor Animan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.