Как получить значение события щелчка ввода диапазона с Ipad? - PullRequest
Новая
       20

Как получить значение события щелчка ввода диапазона с Ipad?

0 голосов
/ 04 января 2019

В настоящее время работает над пользовательским слайдером (т.е. вводом типа «диапазон») на веб-сайте реагирования на машинописный текст, он хорошо работает на настольных ПК (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);
    }
}

Я не ожидал, что ценностное поведение события так сильно изменится ...

Есть ли у кого-нибудь предложение о том, как я могу получить значение позиции, в которой пользователь касается ползунка (это может быть связано с определенным состоянием платформы)?

Спасибо!

1 Ответ

0 голосов
/ 31 мая 2019

Попробуйте эту настройку входа диапазона, чтобы увидеть, соответствует ли она вашим потребностям. Он основан на jQuery, но вы должны понять идею. Я перепробовал много неудачных решений и не смог использовать warnDefault для своего случая, поэтому я выбрал этот драгоценный камень, который позволяет мгновенно позиционировать позиционирование / скольжение большого пальца везде, где вы касаетесь и начинаете касание элемента: 

document.on('touchstart touchmove', 'input[type="range"]', function(e){

var len = $(this).attr('max');
var offset = $(this).offset();
var xxx = (e.pageX - offset.left);
var xPercent = xxx/$(this).width();
var xPos = Math.round(len)*xPercent;

$(this).attr('value',xPos);
$(this).val(xPos).trigger('input');

});
...