如何通过JavaScript限制input标签中的数量？

<input type="text" id="myInput" maxlength="10">

<input type="text" id="myInput">

<script>
document.getElementById('myInput').addEventListener('input', function(e) {
    if (e.target.value.length > 10) {
        e.target.value = e.target.value.slice(0, 10);
    }
});
</script>

<input type="text" id="myInput">

<script>
document.getElementById('myInput').addEventListener('input', function(e) {
    e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 10);
});
</script>

<input type="text" id="myInput">
<span id="charCount">10</span>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#myInput').on('input', function() {
    var maxLength = 10;
    var currentLength = $(this).val().length;
    $('#charCount').text(maxLength - currentLength);
    if (currentLength > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});
</script>