Обмеження введення в текстове поле: дозволяється лише цифри та десяткові крапки

107

Як я можу обмежити введення текстового поля, щоб воно приймало лише числа та десяткову точку?

javascript  html 
— TinTin
джерело
11
Його оригінальне запитання було чудовим, Амар ... !!! Навіщо це змінювати ..? ;)
— SpikETidE
14
Чому голоси "за"? Хлопець тут новий, допоможіть йому покращити свої квестони, пл.
— lexu
Ayyappan.Anbalagan, додай кілька прикладів до публікації :) Чи всі ці рядки для тебе правильні? 192 192.168 192.168.0.1
— lak-b
я отримав це людина спасибі .. тільки 22.22 формат також він повинен дозволяти лише 5 знаків у txtbox ...
— TinTin
З чим проблема, isNaN(this.textbox.value)??
— Sam007

Відповіді:

158 

<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>
Розгорніть фрагмент

Це справді працює!

— ребіско
джерело
1
Для чого потрібен && charCode> 31?
— contactmatt
2
Символ 31 - код сепаратора одиниць. Досить багато цифр і тексту - від 32 до вище. Код говорить, що у випадку, якщо введений код символу не є десятковою І вище 31 (роздільник одиниць), але нижчий за 48 (число нуль) або вище 57 (число дев'ять), не приймайте його.
— Пол Вільямс
9
if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Це призведе до кратного ".'... :)
— Аніш Карунакаран
10
включають клавіатури numkeys і періоди з:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
— MGA
1
це прийняття більше одного ». [період] ', що я неправильно припускаю.
— Акшай Чаула
26 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Це те, що ви шукаєте?

Я сподіваюся, що це допомагає.

EDIT: Я редагував свій приклад вище, так що може бути лише один період, який передує принаймні одній цифрі, а за нею - принаймні одна цифра.

— тау
джерело
1
Думаю, це також підтвердить '99 .23.65.86 '.... Але я думаю, що питання стосувалося підтвердження' 56987.32 'з однією крапкою .....
— SpikETidE
Я бачу, що плакат відредагував своє оригінальне запитання. дякую за оновлення!
— тау
1
Я б краще використовувати /^\d+( evidence\.,Sense\d+)?$/ для підтримки міжнародних номерів (де замість крапки використовується кома)
— FDIM
26

Прийняте рішення не є повним, оскільки ви можете ввести кілька ".", Наприклад 24 .... 22..22. з деякими невеликими модифікаціями він буде працювати за призначенням:

<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>
Розгорніть фрагмент

— Хасан Мокдад
джерело
Я використав вашу відповідь, але я змінив це onkeypress = "return isNumberKey (це, подія);"
— Більбо Баггінс
так, я думаю, що необов’язково набирати передачу події, оскільки вона працює в обох випадках, дякую
— Хассан Мокдад
врятувало нас декілька ключових ударів .. tq
— Ірф
Єдина проблема з цим полягає в тому, що ви можете скопіювати пасту в текст. Додавання до елемента введення ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"здається достатньо
— clamchoda
Це неправильне обслуговування кожного користувача, щоб запобігти використанню перетягування або копіювання та вставки.
— Hubert Grzeskowiak
19

Ось ще одне рішення, яке дозволяє десяткові числа, а також обмежує цифри після десяткових знаків до 2 десяткових знаків.

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відсутності великої літери "С".
— DNKROZ
Прекрасне рішення !!
— Майкл Мюррей
Прекрасний. Для мене прекрасно працює.
— Нур Ахмед
Зауважте, що це рішення дозволяє декілька крапок ( .), тире ( -) і літери, eколи текст вставляється або опускається на поле. Елемент HTML також покаже дві стрілки для збільшення та зменшення числа за замовчуванням у Chrome. Кнопка декрементації дозволяє число опуститися нижче нуля.
— Hubert Grzeskowiak
12

Всі рішення, представлені тут, використовують окремі ключові події. Це дуже схильне до помилок, оскільки введення може бути також надано за допомогою copy'n'paste або drag'n'drop. Також деякі рішення обмежують використання не символьних клавіш, наприклад ctrl+c, Pos1тощо.

Я пропоную, а не перевіряти кожне натискання клавіш, ви перевіряєте, чи достовірний результат стосовно ваших очікувань.

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>
Розгорніть фрагмент

oninputПодія буде працювати тільки після того, як що - то змінилося в області тексту та перед тим , як надані.

Ви можете розширити RegEx до будь-якого формату чисел, який ви бажаєте прийняти. Це набагато більш доцільно та розширюється, ніж перевірка натискань однієї клавіші.

— Губерт Ґшеськовяк
джерело
Це найелегантніше рішення!
— jkd
4

Ви шукаєте щось подібне?

   <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>
— лак-б
джерело
4

Просто потрібно застосувати цей метод у Jquery, і ви можете перевірити своє текстове поле, щоб просто прийняти число з десятковою.

function IsFloatOnly(element) {    
var value = $(element).val(); 
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp); 
}

Ознайомтеся з робочою демонстрацією тут

— Джітандер Кумар
джерело
2

Для тих, хто спотикається тут, як і я, ось версія jQuery 1.10.2, яку я написав, яка дуже добре працює для мене, хоча і ресурсомісткою:

/***************************************************
* 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);
});
— MonkeyZeus
джерело
2

Невелике виправлення до блискучої відповіді @ rebisco, щоб ідеально перевірити десяткову.

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;
}
— Аніш Карунакаран
джерело
це дуже добре. Однак я хотів би обмежити його двома знаками після коми, все-таки це зробити?
— nodeffect
2

Якщо ви хочете це для плаваючих значень,

Ось функція, яку я використовую

<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>
Розгорніть фрагмент

— Рахул
джерело
1 
inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}
— kennebec
джерело
1 
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;
    }
— Йонас Рейціан
джерело
1

ось сценарій, який допоможе вам:

<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);">
— Фаті Амін
джерело
1

Припустимо, ім'я поля вашого текстового поля - Income
Виклик цього методу перевірки, коли вам потрібно перевірити своє поле:

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;
}
— Паллаві Агарвал
джерело
1

Подовження відповіді @ rebisco. цей нижче код дозволить використовувати лише цифри та одинарний '.' (період) у текстовому полі.

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;
        }
    }
— Сантош Курдекар
джерело
1

Краще рішення

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;
}
— Аллан Перейра
джерело
0

Починаючи з відповіді @rebisco:

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

Дозволяє лише цей формат: 123123123 [.121213]

Демо тут демо

— Бабеш Флорін
джерело
0

Сподіваємось, це спрацює для вас.

<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>
— Анкур Кумар
джерело
0

Наступний код працював на мене

Вхідне поле з подією "onkeypress" наступним чином

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

Функція "isNumberKey" полягає в наступному

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;
}
Розгорніть фрагмент

— Бхарат Джайн
джерело
0

Я зауважив, що для всіх наведених тут відповідей все не працює, якщо ми виділимо частину тексту в текстовому полі і спробуємо замінити цю частину. Тому я змінив функцію, яка наведена нижче:

    <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>
— Абхішек Галут
джерело
0

Для десяткових чисел, а також дозволу чисел Негативів з двома місцями для десяткових знаків після точки ... Я змінив функцію на:

<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;
    }
— Кріс Розет
джерело
0

Альтернативний спосіб обмеження введення в текстове поле, щоб він приймав лише числа, а десяткова крапка - використовувати JavaScript всередині введення html. Це працює для мене:

<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')">

--Accepts--

9

9,99

- Не приймати--

9,99,99

ABC

— mpalencia
джерело
0 
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;
}

Це дозволить лише числовий і дозволить поставити "". для десяткової.

— Каль-Ел
джерело
0 
<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)})

Це чудово працює.

— бані
джерело
0

Найкраще і працююче рішення із зразком Pure-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)" />
Розгорніть фрагмент

— Маной Праджапат
джерело
0

Я працюю над цим питанням, і це те, що я маю досі. Це більш-менш працює, але додавати мінус згодом через нову перевірку значення неможливо. Також не дозволяє кома як роздільник тисячі, а лише десятковий.

Це не ідеально, але може дати деякі ідеї. 

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;
                });
            };
        });

Дозволяє:

11 11 .245 (у контролері відформатовано розмиття до 1111.245)

11,44

-123.123

-1 014

0123 (відформатовано у розмиті до 123)

не дозволяє:

! @ # $ / *

абс

11.11.1

11,11.1

.42

— Джейн До
джерело
0 
<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>
— Картик
джерело
0

Я знаю, що це питання дуже старе, але все ж ми часто отримуємо такі вимоги. Існує багато прикладів, проте багато здається занадто багатослівним або складним для простого втілення.

Дивіться це https://jsfiddle.net/vibs2006/rn0fvxuk/ та вдосконалюйте його (якщо можете). Він працює на IE, Firefox, Chrome та Edge Browser.

Ось робочий код. 

        
        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>
Розгорніть фрагмент

— vibs2006
джерело
0

Я вирішив вирішити цю проблему на oninputзаході, щоб вирішити проблему для вставки клавіатури, вставки миші та обведення клавіш. Передайте значення true чи false для позначення десяткових чи цілих чисел.

Це в основному три кроки в трьох одних вкладишах. Якщо ви не хочете обрізати десятки, коментуйте третій крок. Настроювання для округлення можна також зробити на третьому кроці.

// 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);
    }
}
— молюска
джерело
0 
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Ви можете обмежити введення значень користувачем, вказавши діапазон значень ASCII.
Приклад : для числових значень від 48 до 57 (від 0 до 9)

— ШАШАНК ПУЖАРИ
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.