javascript - Begrense inndata i tekstboks: tillate kun tall og desimalpunkt

Hvordan kan jeg begrense inndata til et tekstfelt slik at det bare godtar tall og desimalpunkt?

Svar #1

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

Dette fungerer virkelig!

Svar #2

Den aksepterte løsningen er ikke komplett, siden du kan skrive inn flere «.» , for eksempel 24....22..22. med noen små endringer vil det fungere som tiltenkt:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>

Svar #3

form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Er dette det du leter etter?

Jeg håper det hjelper.

REDIGER: Jeg redigerte eksemplet mitt ovenfor slik at det bare kan være ett punktum, forutgått av minst ett siffer og etterfulgt av minst ett siffer.

Svar #4

Her er en løsning til som tillater desimaltall og også begrenser sifrene etter desimal til 2 desimaler.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">

Svar #5

Alle løsningene som presenteres her bruker enkeltstående tastetrykk. Dette er svært feilutsatt siden input også kan gis ved bruk av kopier og lim inn eller dra og slipp. Noen av løsningene begrenser også bruken av ikke-tegn-taster som ctrl+c, Pos1 osv.

Jeg foreslår at i stedet for å sjekke hvert tastetrykk, bør du sjekke om resultatet er gyldig i forhold til dine forventninger.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}

<textarea id="test1" oninput="validateNumber(this);" ></textarea>

Hendelsen oninput utløses rett etter at noe ble endret i tekstområdet og før det blir vist.