Не может изменить входное значение динамически в теневом доме - PullRequest
Новая
       34

Не может изменить входное значение динамически в теневом доме

0 голосов
/ 10 июня 2019

Я использую этот код для предотвращения добавления пользователем более 20 символов внутри элемента ввода с помощью события keyup. В настоящее время моя команда и я мигрируем с Ionic3 на Ionic4, и есть много изменений, когда один из них представляет Shadow DOM. Я думаю, что моя проблема связана с Shadow DOM, но я не могу ее исправить.

Я должен отметить, что эта логика работала в нашем старом приложении (Ionic3), а не действовала действительно странно.

Моя главная проблема заключается в том, что я не могу динамически изменять входное значение. Пробовал несколько решений, но безуспешно.

Мы используем jQuery для добавления прослушивателя событий. Класс «remove-limit» добавляется только к тем элементам ввода, которые не нуждаются в этой логике.

Все работает нормально, когда проверяется в отладчике консоли, а также когда записывается значение в консоль, но в конце логики (после того, как указатель покидает логику внутри прослушивателя событий) значение сбрасывается обратно к предыдущему. Добавление settimeout (100 мс) с консолью входного значения, зарегистрированной в конце логики, показало мне это. 

$('body').on('keyup', '.sc-new-scene input, .sc-configure-device input, .screen input', function(e){
            let value = e.target.value;
            if ($(this).parent().hasClass('remove-limit') == false && $(this).parent().hasClass('searchbar-input-container') == false) {
                let maxChars: number = $(this).parent().attr('maxChars');
                if (maxChars === undefined) {
                    maxChars = 20;
                }
                if (value.length > maxChars) {
                    let str = value.slice(0, maxChars - value.length);
                    e.target.value = str;
                }
                $(this).parent().children('.hc-input-counter').html(e.target.value.length + '/' + maxChars);
            }
            if (e.keyCode === 13 || e.keyCode === 9) {
                $('input').blur();
            }
        });

Код можно легко упростить до этого, поскольку я попробовал его через консоль, и происходит то же самое. 

$('body').on('keyup', 'input', (e) => {
    e.target.value = 'someValue'
    console.log(e.target.value); // "someValue"
    setTimeout(() => {
        console.log(e.target.value) // value that is inserted by user <-- expected value to be "someValue"
    }, 100)
})

Почему мои входные значения сбрасываются?

...