В настоящее время работает над пользовательским слайдером (т.е. вводом типа «диапазон») на веб-сайте реагирования на машинописный текст, он хорошо работает на настольных ПК (MacOs и Windows + целевые браузеры) и Android, но что-то не хватает на Ipad (мы фокусируемся только на планшетах) ).
Проблема в том, что мы не можем установить значение, нажав на сам ползунок: мы можем перетащить его и нажать на метки сверху, но не внутри.
Я видел много тем, говорящих о том, что сенсорное устройство Apple работает по-разному для многих событий, поэтому я отладил свою, чтобы увидеть, что было не так.
Мой метод onClick устанавливает текущее значение ползунка на основе значения, полученного из события, но результат показывает, что только при выполнении на Ipad (в Safari и Chrome) эти две переменные равны (и поэтому мой ползунок обновляет его значение правильно, но с текущим)!
В любой другой среде все работает нормально, и значение события соответствует тому, что должно быть «будущей ценностью».
Я также протестировал различные сенсорные события, как описано ниже, но ни одно из них не было активировано, даже с некоторыми предотвращениями по умолчанию.
Это сам слайдер (срабатывает только onClick):
<input
type="range"
min={-half}
max={half}
step="1"
value={this.state.selectedRange}
onTouchStart={(e: any) => { console.log("on touch : " + e.target.value);}}
onTouchMove={(e: any) => { console.log("on touch : " + e.target.value);}}
onTouchCancel={(e: any) => { console.log("on touch : " + e.target.value);}}
onTouchEnd={(e: any) => { console.log("on touch : " + e.target.value);}}
onTouch={(e: any) => { console.log("on touch : " + e.target.value);}}
onClick={(e: any) => this.onClickSlider(e, "Inputslider + changer")}
defaultValue={this.state.selectedRange}
onChange={(e: any) => { this.onChange(e); }}
/>
И onClickSlider:
onClickSlider(e: any, m: string) {
let value: any = e.target.value;
console.log("New Value : " + e.target.value);
// target value is equal to the current value... (only on Ipad)
if (this.props.onChange) {
if (!this.props.slider) {
value = value - 1;
}
this.props.onChange(value);
}
}
Я не ожидал, что ценностное поведение события так сильно изменится ...
Есть ли у кого-нибудь предложение о том, как я могу получить значение позиции, в которой пользователь касается ползунка (это может быть связано с определенным состоянием платформы)?
Спасибо!