js 设置输入框不能输入数字

<input type="text" pattern="[^\d]*" title="请输入非数字字符">

<input type="text" id="noNumberInput">
<script>
document.getElementById('noNumberInput').addEventListener('input', function(e) {
    this.value = this.value.replace(/\d/g, '');
});
</script>

<style>
.no-number-input::placeholder {
    color: red;
}
.no-number-input:focus::placeholder {
    color: transparent;
}
</style>
<input type="text" class="no-number-input" placeholder="请输入非数字字符">

<input type="text" id="noNumberInput">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#noNumberInput').on('input', function() {
    $(this).val($(this).val().replace(/\d/g, ''));
});
</script>