在 iPadOS 14 Safari 上触发 keydown 事件时设置输入值不正确

如何解决在 iPadOS 14 Safari 上触发 keydown 事件时设置输入值不正确

在 html 中使用以下代码：

<input id="test" autocomplete="off" inputmode="numeric"/>
<script>
var input = document.getElementById('test');
input.addEventListener('keydown',function(e){
     input.value = 34;
})
</script>

环境
iPadOS14 + Safari + 日文键盘

步骤：
1.专注于输入打开键盘。
2.切换到日文键盘
3. 按任意数字按钮，如 2、3 等
4.观察到输入值为342或343而不是34。

预期： 输入值应为 34。

已知的解决方法：
按下键时使用 setTimeout 更新 iput 值。

setTimeout(() => {
    input.value = 34;
},20)

我的问题是有没有更好的解决方案来解决这个问题？

解决方法

所描述的问题与日文键盘无关 - 您可以用英文键盘演示同样的问题。

这与事件的顺序有关。在 keydown 时，您会看到该事件，但此时 input.value 尚未被系统更新。因此，当您将 34 写入该值时，随后系统会看到一个 keyup，然后将键写入该值 - 连接到已经存在的任何值。

所以，如果你监听keyup，你会得到你想要的结果，系统会将按下的键码放入input.value，然后你会用34覆盖它。

<html><head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
    body { margin: 0; width:100%; height:100%;  background-color:#000000; }
    html { width:100%; height:100%; background-color:#000000; }

    .embed-container iframe,.embed-container object,.embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    </style>
</head>
<body>
    <div class="embed-container">
        <iframe id="player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="375" height="211" src="https://www.youtube.com/embed/h-UKzttJbes?modestbranding=1&amp;origin=http%3A%2F%app-name&amp;autoplay=0&amp;playsinline=1&amp;controls=1&amp;enablejsapi=1&amp;widgetid=1"></iframe>
    </div>
    <script type="text/javascript" id="www-widgetapi-script" src="https://www.youtube.com/s/player/bfb74eaf/www-widgetapi.vflset/www-widgetapi.js" async=""></script><script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
    <script>
    var player;
    var error = false;

    YT.ready(function() {
        player = new YT.Player('player',{
  "width" : "100%","events" : {
    "onPlaybackQualityChange" : "onPlaybackQualityChange","onReady" : "onReady","onError" : "onPlayerError","onStateChange" : "onStateChange"
  },"videoId" : "h-UKzttJbes","height" : "100%","playerVars" : {
    "modestbranding" : 1,"origin" : "app-name","autoplay" : 0,"playsinline" : 1,"controls" : 1
  }
});
        player.setSize(window.innerWidth,window.innerHeight);
        window.location.href = 'ytplayer://onYouTubeIframeAPIReady';

        // this will transmit playTime frequently while playng
        function getCurrentTime() {
             var state = player.getPlayerState();
             if (state == YT.PlayerState.PLAYING) {
                 time = player.getCurrentTime()
                 window.location.href = 'ytplayer://onPlayTime?data=' + time;
             }
        }
        
        window.setInterval(getCurrentTime,500);
             
    });

    function onReady(event) {
        window.location.href = 'ytplayer://onReady?data=' + event.data;
    }

    function onStateChange(event) {
        if (!error) {            
            window.location.href = 'ytplayer://onStateChange?data=' + event.data;
        }
        else {
            error = false;
        }
    }

    function onPlaybackQualityChange(event) {
        window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
    }

    function onPlayerError(event) {
        if (event.data == 100) {
            error = true;
        }
        window.location.href = 'ytplayer://onError?data=' + event.data;
    }
    
    window.onresize = function() {
        player.setSize(window.innerWidth,window.innerHeight);
    }
    </script>


</body></html>

filenames <- list.files(pattern = "^value")  
models <- lapply(filenames,readRDS)

在 iPadOS 14 Safari 上触发 keydown 事件时设置输入值不正确

如何解决在 iPadOS 14 Safari 上触发 keydown 事件时设置输入值不正确

解决方法

相关推荐