输入不可删除

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;">

或者，如果需要，也可以使用Javascript验证input是否只有数字。编写如下所示的方法，然后使用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;">