Ввод не удаляется

Question

У меня есть телефонный ввод в моей форме. Это позволяет только числа. Так что я использую простой код JavaScript, чтобы сделать это. Но это поле ввода времени не может быть удалено.

<form id="aylikal" action="https://web.myadress.co" method="post">
  <table style="height: 116px;" width="100%">
    <tbody>
      <tr>
        <input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
        <td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
      </tr>
      <tr>
        <td style="width: 590px;">
          <input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
        </td>
      </tr>
      <tr>
        <td style="width: 590px;">
          <input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
        </td>
      </tr>
      <tr>
        <td style="width: 590px;">
          <button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
        </td>
      </tr>
    </tbody>
  </table>
</form>

код

function isInputNumbersa(evt) {

  var ch = String.fromCharCode(evt.which);

  if (!(/[0-9]/.test(ch))) {
    evt.preventDefault();
  }

}

Answer 1

KeyboardEvent.which устарело. Вместо этого используйте KeyboardEvent.key.

Обратите внимание, что, хотя это не позволяет пользователю печатать буквы, оно не предотвращает вставку букв. Я бы использовал надежную библиотеку вместо этого.

function isInputNumbersa(e) {
  if (!(/[0-9]/.test(e.key))) {
    e.preventDefault();
  }
}

<form id="aylikal" action="https://web.myadress.co" method="post">
    <table style="height: 116px;" width="100%">
      <tbody>
        <tr>
          <input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
          <td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
        </tr>
        <tr>
          <td style="width: 590px;">
            <input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
          </td>
        </tr>
        <tr>
          <td style="width: 590px;">
            <input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
          </td>
        </tr>
        <tr>
          <td style="width: 590px;">
            <button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
          </td>
        </tr>
      </tbody>
    </table>
  </form>

Answer 2

Если вы хотите, чтобы пользователи вводили только цифры, вы можете использовать type="number".

<input name="telefon" required type="number" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">

Или, если вы хотите, вы также можете проверить, если input имеет только числа, используя Javascript. Напишите метод, как показано ниже, и вызовите его, используя event listeners.

let input=document.querySelector('.sa');
input.onblur = e => {
    if(isNaN(parseInt(input.innerHTML))){
        alert('Please enter Number');
         input.innerHTML = '';
    }
 }

В качестве альтернативы вы также можете использовать атрибут pattern.

<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" pattern='5[0-9]{2}-[0-9]{3}-[0-9]{2}-[0-9]{2}' onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">