Jak mogę ograniczyć dane wejściowe do pola tekstowego, aby akceptowało tylko liczby i przecinek dziesiętny?
isNaN(this.textbox.value)
??
Jak mogę ograniczyć dane wejściowe do pola tekstowego, aby akceptowało tylko liczby i przecinek dziesiętny?
isNaN(this.textbox.value)
??
Odpowiedzi:
<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>
To naprawdę działa!
&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
form.onsubmit = function(){
return textarea.value.match(/^\d+(\.\d+)?$/);
}
Czy tego szukasz?
Mam nadzieję, że to pomoże.
EDYCJA: Powyższy przykład zredagowałem tak, że może istnieć tylko jedna kropka, poprzedzona co najmniej jedną cyfrą, a po niej co najmniej jedna cyfra.
Przyjęte rozwiązanie nie jest kompletne, ponieważ możesz wprowadzić wiele znaków „.”, Na przykład 24 .... 22..22. z niewielkimi modyfikacjami będzie działać zgodnie z przeznaczeniem:
<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>
ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"
wydaje się być wystarczające
Oto jeszcze jedno rozwiązanie, które pozwala na liczby dziesiętne, a także ogranicza cyfry po przecinku do 2 miejsc po przecinku.
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)">
if
nie zawiera litery „C”.
.
), myślnika ( -
) i litery, e
gdy tekst jest wklejany lub upuszczany na pole. Element HTML będzie również wyświetlał dwie strzałki do domyślnie zwiększania i zmniejszania liczby w Chrome. Przycisk zmniejszania wartości umożliwia spadek liczby poniżej zera.
Wszystkie prezentowane tutaj rozwiązania wykorzystują pojedyncze kluczowe zdarzenia. Jest to bardzo podatne na błędy, ponieważ dane wejściowe można również podać za pomocą kopiowania i wklejania lub przeciągania i upuszczania. Również niektóre z rozwiązań ograniczyć użycie kluczy bez znaków podobnych ctrl+c
,Pos1
etc.
Sugeruję, aby zamiast sprawdzać każde naciśnięcie klawisza, sprawdzać, czy wynik jest zgodny z Twoimi oczekiwaniami.
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>
Plik oninput
Zdarzenie jest wywoływane po prostu coś się zmieniło w polu tekstowym i przed renderowane.
Możesz rozszerzyć wyrażenie regularne na dowolny format liczb, który chcesz zaakceptować. Jest to znacznie łatwiejsze w utrzymaniu i rozszerzaniu niż sprawdzanie pojedynczych naciśnięć klawiszy.
Szukasz czegoś takiego?
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.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>
Wystarczy zastosować tę metodę w Jquery i zweryfikować swoje pole tekstowe, aby zaakceptować liczbę tylko z dziesiętną.
function IsFloatOnly(element) {
var value = $(element).val();
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp);
}
Zobacz działające demo tutaj
Dla każdego, kto się tutaj potyka, tak jak ja, oto wersja jQuery 1.10.2, którą napisałem, która działa bardzo dobrze dla mnie, choć wymaga dużych zasobów:
/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
var target = $(this);
var prev_val = target.val();
setTimeout(function(){
var chars = target.val().split("");
var decimal_exist = false;
var remove_char = false;
$.each(chars, function(key, value){
switch(value){
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '.':
if(value === '.'){
if(decimal_exist === false){
decimal_exist = true;
}
else{
remove_char = true;
chars[''+key+''] = '';
}
}
break;
default:
remove_char = true;
chars[''+key+''] = '';
break;
}
});
if(prev_val != target.val() && remove_char === true){
target.val(chars.join(''))
}
}, 0);
});
Niewielka korekta genialnej odpowiedzi @ rebisco, która doskonale sprawdza ułamek dziesiętny.
function isNumberKey(evt) {
debugger;
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
return false;
}
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Jeśli chcesz go dla wartości zmiennoprzecinkowych,
Oto funkcja, której używam
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function check(e, value) {
//Check Charater
var unicode = e.charCode ? e.charCode : e.keyCode;
if (value.indexOf(".") != -1)
if (unicode == 46) return false;
if (unicode != 8)
if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>
</HTML>
function integerwithdot(s, iid){
var i;
s = s.toString();
for (i = 0; i < s.length; i++){
var c;
if (s.charAt(i) == ".") {
} else {
c = s.charAt(i);
}
if (isNaN(c)) {
c = "";
for(i=0;i<s.length-1;i++){
c += s.charAt(i);
}
document.getElementById(iid).value = c;
return false;
}
}
return true;
}
oto skrypt, który Ci pomoże:
<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
var temp = obj.value;
// avoid changing things if already formatted correctly
var reg0Str = '[0-9]*';
if (decimalPlaces > 0) {
reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
} else if (decimalPlaces < 0) {
reg0Str += '\[\,\.]?[0-9]*';
}
reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
reg0Str = reg0Str + '$';
var reg0 = new RegExp(reg0Str);
if (reg0.test(temp)) return true;
// first replace all non numbers
var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
var reg1 = new RegExp(reg1Str, 'g');
temp = temp.replace(reg1, '');
if (allowNegative) {
// replace extra negative
var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
var reg2 = /-/g;
temp = temp.replace(reg2, '');
if (hasNegative) temp = '-' + temp;
}
if (decimalPlaces != 0) {
var reg3 = /[\,\.]/g;
var reg3Array = reg3.exec(temp);
if (reg3Array != null) {
// keep only first occurrence of .
// and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
reg3Right = reg3Right.replace(reg3, '');
reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
}
}
obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
var key;
var isCtrl = false;
var keychar;
var reg;
if(window.event) {
key = e.keyCode;
isCtrl = window.event.ctrlKey
}
else if(e.which) {
key = e.which;
isCtrl = e.ctrlKey;
}
if (isNaN(key)) return true;
keychar = String.fromCharCode(key);
// check for backspace or delete, or if Ctrl was pressed
if (key == 8 || isCtrl)
{
return true;
}
reg = /\d/;
var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
var temp=obj.value;
if(temp=="-")
{
temp="";
}
if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
{
temp=temp+"00";
}
if (temp.indexOf(".")==0)
{
temp="0"+temp;
}
if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
{
temp=temp.replace("-","-0") ;
}
if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
{
temp=temp+"00";
}
if (temp.indexOf(",")==0)
{
temp="0"+temp;
}
if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
{
temp=temp.replace("-","-0") ;
}
temp=temp.replace(",",".") ;
obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>
<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">
Załóżmy, że nazwa pola tekstowego to Income
Wywołaj tę metodę walidacji, gdy chcesz zweryfikować swoje pole:
function validate() {
var currency = document.getElementById("Income").value;
var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
if (pattern.test(currency)) {
alert("Currency is in valid format");
return true;
}
alert("Currency is not in valid format!Enter in 00.00 format");
return false;
}
Rozszerzenie odpowiedzi @ rebisco. poniższy kod zezwoli tylko na cyfry i pojedynczy znak „.” (kropka) w polu tekstowym.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
// If the number field already has . then don't allow to enter . again.
if (evt.target.value.search(/\./) > -1 && charCode == 46) {
return false;
}
return true;
}
}
Lepsze rozwiązanie
var checkfloats = function(event){
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
if(event.target.value.indexOf('.') >=0 && charCode == 46)
return false;
return true;
}
Postanowiłem rozwiązać ten problem na oninput
wydarzenia, aby poradzić sobie z wklejaniem klawiatury, wklejaniem myszy i naciśnięciami klawiszy. Przekaż wartość true lub false, aby wskazać walidację dziesiętną lub całkowitą.
Zasadniczo to trzy kroki w trzech liniach. Jeśli nie chcesz skracać liczb dziesiętnych, skomentuj trzeci krok. Korekty zaokrąglania można również dokonać w trzecim kroku.
// Example Decimal usage;
// <input type="text" oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text" oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
try {
// For integers, replace everything except for numbers with blanks.
if (!isDecimal)
elm.value = elm.value.replace(/[^0-9]/g, '');
else {
// 1. For decimals, replace everything except for numbers and periods with blanks.
// 2. Then we'll remove all leading ocurrences (duplicate) periods
// 3. Then we'll chop off anything after two decimal places.
// 1. replace everything except for numbers and periods with blanks.
elm.value = elm.value.replace(/[^0-9.]/g, '');
//2. remove all leading ocurrences (duplicate) periods
elm.value = elm.value.replace(/\.(?=.*\.)/g, '');
// 3. chop off anything after two decimal places.
// In comparison to lengh, our index is behind one count, then we add two for our decimal places.
var decimalIndex = elm.value.indexOf('.');
if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
}
}
catch (err) {
alert("ValidateNumber " + err);
}
}
Zaczynając od @rebisco odpowiedź:
function count_appearance(mainStr, searchFor) {
return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
$return = true;
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
$return = false;
$val = $(evt.originalTarget).val();
if (charCode == 46) {
if (count_appearance($val, '.') > 0) {
$return = false;
}
if ($val.length == 0) {
$return = false;
}
}
return $return;
}
Dopuszcza tylko ten format: 123123123 [.121213]
Demo tutaj demo
Mam nadzieję, że to zadziała.
<input type="text" onkeypress="return chkNumeric(event)" />
<script>
function chkNumeric(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
if (charCode == 46) { return true; }
else { return false; }
}
return true;
}
</script>
Poniższy kod zadziałał dla mnie
Pole wprowadzania ze zdarzeniem „onkeypress” w następujący sposób
<input type="text" onkeypress="return isNumberKey(this,event);" />
Funkcja „isNumberKey” jest następująca
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;
}
Zauważyłem, że dla wszystkich udzielonych tutaj odpowiedzi rzeczy nie działają, jeśli zaznaczymy część tekstu w polu tekstowym i spróbujemy nadpisać tę część. Zmodyfikowałem więc funkcję jak poniżej:
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
{
return false;
}
if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
{
return true;
}
if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
{
return false;
}
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)"
type="text" name="txtChar">
</BODY>
</HTML>
Dla liczb dziesiętnych, a także dopuszczających liczby ujemne z 2 miejscami dziesiętnymi po przecinku ... Zmodyfikowałem funkcję, aby:
<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>
function isNumberKey(evt, element){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
return false;
else {
var len = $(element).val().length;
// Validation Point
var index = $(element).val().indexOf('.');
if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
return false;
}
if (index > 0) {
var CharAfterdot = (len + 1) - index;
if (CharAfterdot > 3) {
return false;
}
}
// Validating Negative sign
index = $(element).val().indexOf('-');
if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
return false;
}
}
return true;
}
alternatywnym sposobem ograniczenia danych wejściowych do pola tekstowego, tak aby akceptowało tylko liczby i przecinek dziesiętny, jest użycie javascript w danych wejściowych HTML. To działa dla mnie:
<input type="text" class="form-control" id="price" name="price" placeholder="Price"
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">
- Akceptuje--
9
9,99
--Nie akceptuje--
9,99,99
ABC
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
{
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
return true;
}
Pozwoli to tylko na numeryczne i pozwoli wstawić „.” dla dziesiętnych.
<script type="text/javascript">
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})
To działa dobrze.
Najlepsze i działające rozwiązanie z przykładową demonstracją na żywo w czystym Javascript: https://jsfiddle.net/manoj2010/ygkpa89o/
<script>
function removeCommas(nStr) {
if (nStr == null || nStr == "")
return "";
return nStr.toString().replace(/,/g, "");
}
function NumbersOnly(myfield, e, dec,neg)
{
if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
return false;
}
var allowNegativeNumber = neg || false;
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
var srcEl = e.srcElement ? e.srcElement : e.target;
// control keys
if ((key == null) || (key == 0) || (key == 8) ||
(key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == ".")) {
//myfield.form.elements[dec].focus();
return srcEl.value.indexOf(".") == -1;
}
//allow negative numbers
else if (allowNegativeNumber && (keychar == "-")) {
return (srcEl.value.length == 0 || srcEl.value == "0.00")
}
else
return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />
Sam pracuję nad tym problemem i to mam do tej pory. To mniej więcej działa, ale nie można później dodać minus ze względu na nową kontrolę wartości. Nie zezwala również na przecinek jako separator tysięcy, tylko po przecinku.
Nie jest doskonały, ale może dać kilka pomysłów.
app.directive('isNumber', function () {
return function (scope, elem, attrs) {
elem.bind('keypress', function (evt) {
var keyCode = (evt.which) ? evt.which : event.keyCode;
var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
var regex = /^\-?\d+((\.|\,)\d+)?$/;
var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators
//allows numbers, separators and controll keys and rejects others
if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {
//test the string with regex, decline if doesn't fit
if (elem[0].value != "" && !regex.test(testValue)) {
event.preventDefault();
return false;
}
return true;
}
event.preventDefault();
return false;
});
};
});
Umożliwia:
11 11 .245 (w kontrolerze sformatowanym przez rozmycie do 1111.245)
11,44
-123,123
-1 014,
0123 (sformatowany jako rozmycie do 123)
nie pozwala:
! @ # $ / *
ABC
11.11.1
11,11.1
.42
<input type="text" onkeypress="return isNumberKey(event,this)">
<script>
function isNumberKey(evt, obj) {
var charCode = (evt.which) ? evt.which : event.keyCode
var value = obj.value;
var dotcontains = value.indexOf(".") != -1;
if (dotcontains)
if (charCode == 46) return false;
if (charCode == 46) return true;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
Wiem, że to pytanie jest bardzo stare, ale wciąż często otrzymujemy takie wymagania. Istnieje wiele przykładów, ale wiele z nich wydaje się być zbyt rozwlekłych lub skomplikowanych, aby można je było łatwo wdrożyć.
Zobacz ten https://jsfiddle.net/vibs2006/rn0fvxuk/ i popraw go (jeśli możesz). Działa w przeglądarce IE, Firefox, Chrome i Edge.
Oto działający kod.
function IsNumeric(e) {
var IsValidationSuccessful = false;
console.log(e.target.value);
document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
//console.log("e.Key Value = "+e.key);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
IsValidationSuccessful = true;
break;
case "Decimal": //Numpad Decimal in Edge Browser
case ".": //Numpad Decimal in Chrome and Firefox
case "Del": // Internet Explorer 11 and less Numpad Decimal
if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
{
IsValidationSuccessful = false;
}
else
{
IsValidationSuccessful = true;
}
break;
default:
IsValidationSuccessful = false;
}
//debugger;
if(IsValidationSuccessful == false){
document.getElementById("error").style = "display:Block";
}else{
document.getElementById("error").style = "display:none";
}
return IsValidationSuccessful;
}
Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
<span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
<div id="info"></div>
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
Możesz ograniczyć wartości do wprowadzenia przez użytkownika, określając zakres wartości ASCII.
Przykład : od 48 do 57 dla wartości liczbowych (od 0 do 9)