Воссоздание ввода диапазона HTML5 для Mobile Safari (webkit)?

Question

Итак, я работал над приложением iPad для HTML5 и столкнулся с проблемой.У меня не было доступа к iPad во время первой работы над этим приложением, и я использовал настольный Safari, чтобы быстро собрать свое приложение (наверное, не самое лучшее, во всяком случае ...)

Мне приходится полагатьсяна входной диапазон для части интерфейса.Увидев, что в HTML5 есть диапазон ввода, я был счастлив, потому что это как раз то, что мне было нужно.Мне даже удавалось придать ему стиль, который был точно разработан:

Это здорово!... пока я не попробовал его на iPad, и он не работает.Просто показывает текстовый ввод.Теперь я задаюсь вопросом, что делать ... Мне нужен слайдер, который при перетаскивании высыпает данные.Очевидно, что нужно работать с сенсорным.После осмотра всей сети, кажется, нет твердого решения.

Что вы, ребята, предлагаете здесь?Как правильно кодировать работающий сенсорный слайдер, такой же, как родной HTML5, который он не поддерживает!?

Буду очень признателен за любые идеи / мысли / знания / опыт!Джеймс

Answer 1

Я проверил все предложенных" решений " и обнаружил, что всем не хватает .
Все они чрезмерно раздуты , некоторые изменяют существующую разметку или вынуждают ненужные стили CSS.

Поэтому я создал собственное решение в 2kb JavaScript ( minified ).

Попробуйте (на вашем мобильном устройстве): https://range -touch.herokuapp.com

Код : https://github.com/dwyl/range-touch (кратко и прокомментировано )

Чтобы это работало в вашем собственном проекте, все, что вам нужно сделать, это включить файл
range-touch.min.js на страницу / шаблон.

Магически <input type="range"> работает на всех мобильных устройствах.

Вы можете оформить слайдер и кнопку так, как вам нравится.
Я включил образец стилей в опционально / style.css

Примечание : это решение Предполагается, у вас есть JQuery или Zepto.js

Answer 2

Попробуйте это - https://github.com/freqdec/fd-slider. Даже всплывающая подсказка на демонстрационной странице работает на мобильном сафари - http://www.frequency -decoder.com / demo / fd-slider / tooltip / .

Answer 3

Вы можете посмотреть http://jqueryui.com/demos/slider/. Попробуйте получить доступ к странице на iPad и посмотрите, удобна ли она для сенсорного экрана.

Answer 4

Простое и быстрое решение!

Ползунок диапазона ввода можно сделать удобным для пользователя на мобильном устройстве, убрав неприятный эффект выделения на слайдере при нажатии на него.

Исправление - добавьте свойство CSS, -webkit-tap-highlight-color: transparent к CSS элемента или полной HTML-странице. Это уберет эффект выделения на элементе при его нажатии на мобильном устройстве.

Answer 5

Я обнаружил, что нужно использовать очень легкое касание мини-планшета Safari (или телефона), и слайдер работает.Если вы нажмете слишком сильно, Safari Mobile (или планшет) попытается вызвать всплывающее окно «выбрать / выбрать все», как если бы это было текстовое поле.Кроме того, Safari на моем планшете или телефоне подумал, что я хочу «переместить окно» - я пока не нашел решения этих проблем.Тем не менее, я заставил слайдер работать в Safari «легким прикосновением пальца».

Мне показались полезными следующие ресурсы:

Ручка от Aron Woost: https://codepen.io/aronwoost/pen/nlyrf Вот пример кода Вуста:

    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 */
}

Даниэль Стерн: https://css -tricks.com / styling-cross-browser-compatibility-range-input-css /

Вы можете выполнить поиск в Google на странице "Как оформить слайдеры диапазонов в Webkit By Sara Vieira" и найти ее статью.

Надеюсь, это поможет.

Answer 6

Существует исправление для диапазона ввода от jquerytools для сенсорных устройств: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js

Работает как шарм!

Answer 7

У меня точно такая же проблема, только с айфоном.

Это потому, что Mobile Safari поддерживает только подмножество HTML5.Я использую JqTouch, который вызывает у меня всевозможные проблемы, поэтому избегайте этой платформы.

Взгляните на jquery mobile.В настоящее время это Alpha 3, но имеет ползунок, который работает на iOS.

Надеюсь, это вам немного поможет.