javascript - 输入不可删除

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>