CODEWITHSUNDEEP
javascripthtmlinput
Dorbagna
Dorbagna

Reputation: 315

Input is not deletable

I have a telephone input on my form. It allows numbers only.So I use a simple javascript code to do this.But this time input box cannot be deleted.

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

Code

function isInputNumbersa(evt) {

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

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

}

Upvotes: 1

Views: 85

Answers (2)

A Rogue Otaku
A Rogue Otaku

Reputation: 923

If you want users to only enter numbers then you can use type="number".

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

Or if you want to, you can also validate the if the input only has numbers using Javascript. Write a method like below and call it using event listeners.

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

Alternatively you can also use the pattern attribute.

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

Upvotes: 0

Orkhan Alikhanov
Orkhan Alikhanov

Reputation: 10050

KeyboardEvent.which is deprecated. Use KeyboardEvent.key instead.

Note that although this prevents user from typing letters, it does not prevent pasting letters. I'd use a robust library instead. 

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>

Upvotes: 1

Related Questions