스벨테 입력 번호 유효성 검사. 글자 입력을 막을 수 없다

스벨테 입력 번호 유효성 검사. 글자 입력을 막을 수 없다

나는 내가 무엇을 잘못하고 있는지 잘 모르겠다. 입력에 아직도 글자가 표시되고 있다.

<script>
    let value = "";
    
    function isNumber(value) {
        return !isNaN(value);
    }

    function handleInput(e) {
        let oldValue = value;
        let newValue = e.target.value;

        console.log(oldValue, newValue, "isNumber", isNumber(newValue));

        if (isNumber(newValue) && newValue.length < 17) {
            value = newValue;
        } else {
            value = oldValue;
        }
    }
</script>

<div class="container">
    <input
        {value}
        on:input|preventDefault={handleInput}
    />
</div>

여기도 있어요.

---

그냥 이렇게 할 수 있을거야:

else {
    e.target.value = oldValue;
}

---

REPL

입력 시 사용자에게 경고하려면... 아래에 쓰다

<script>
  let value = "";


  // Check if user input is number  
  const onKeyPress = e => {
    if (!isFinite(e.key)) {
      alert('Not A number')
    }
  };

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value on:keypress={onKeyPress} />

사용자에게 경고하지 않고.. 아래에 쓰다

<script>
  let value = "";

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value />

---

입력 유형을 "number"로 설정합니다.

<input
    type='number'
    bind:value
    on:input|preventDefault={handleInput}
/>

REPL

---

다른 대답들에서 영감을 얻어서 내게 효과가 있었던 것은 다음과 같다.

다음 내용:

• 값을 숫자로 강요하다
• 값이 숫자로 나타나지 않도록 하는 문자를 방지합니다
• 양식 제출을 돕기 위해 추가로 입력을 받다

export let value: number;

function updateValue(e: Event): void {
  const target = e.target as HTMLInputElement;
  const newValue = Number(target.value);

  if (!isNaN(newValue)) {
    value = newValue;
  } else {
    // reset to old value
    target.value = value.toString();
  }
}

<input
  type="text"
  inputmode="numeric"
  pattern="[0-9.]*"
  {value}
  on:input|preventDefault={updateValue}
/>