Question

我使用此代码来防止用户使用keyup事件在输入元素内添加20个以上的字符。目前，我和我的团队正从Ionic3迁移到Ionic4，其中有许多制动方面的变化，其中之一就是引入了Shadow DOM。我认为我的问题与Shadow DOM有关，但我无法解决。

我需要提到的是，这种逻辑在我们的旧版应用程序（Ionic3）中有效，而不是表现得很奇怪。

我的主要问题是我无法动态更改输入值。尝试了几种解决方案，但没有成功。

我们正在使用jQuery添加事件监听器。仅在不需要此逻辑的那些输入元素上添加“ remove-limit”类。

在控制台调试器上进行检查以及在控制台记录值时，一切工作都很好，但是在逻辑末尾（指针离开逻辑在事件侦听器内部之后）将值重置为先前的值。添加settimeout（100ms）并在逻辑末尾记录了输入值控制台，这向我展示了这一点。

$('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)
})

为什么我的输入值会重置？

无法在Shadow dom上动态更改输入值

0 个答案: