Ограничение ввода в текстовое поле: разрешены только цифры и десятичная точка - PullRequest
Новая
       67

Ограничение ввода в текстовое поле: разрешены только цифры и десятичная точка

93 голосов
/ 11 мая 2010

Как я могу ограничить ввод текстовым полем, чтобы оно принимало только цифры и десятичную точку?

Ответы [ 30 ]

149 голосов
/ 13 мая 2010 

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

Это действительно работает!

24 голосов
/ 11 мая 2010 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Это то, что вы ищете?

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: я отредактировал мой пример выше, так что может быть только один период, которому предшествует как минимум одна цифра, а затем как минимум одна цифра.

21 голосов
/ 06 мая 2015

Принятое решение не является полным, поскольку вы можете ввести несколько символов «.», Например, 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>
13 голосов
/ 16 июня 2015

Вот еще одно решение, которое допускает десятичные числа, а также ограничивает цифры после десятичного числа до двух десятичных знаков. 

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)">
5 голосов
/ 01 февраля 2017

Все решения, представленные здесь, используют отдельные ключевые события. Это очень подвержено ошибкам, поскольку ввод также может быть получен с использованием 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 до любого числового формата, который вы хотите принять. Это гораздо более легко обслуживаемо и расширяемо, чем проверка нажатия одной клавиши.

4 голосов
/ 11 мая 2010

Вы ищете что-то подобное? 

   <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 голосов
/ 30 января 2014

Просто нужно применить этот метод в Jquery, и вы можете проверить текстовое поле, чтобы просто принять число только с десятичным числом. 

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

Пожалуйста, ознакомьтесь с рабочей демоверсией здесь

2 голосов
/ 05 ноября 2013

Небольшая поправка к блестящему ответу @ 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;
}
2 голосов
/ 29 октября 2013

Для тех, кто спотыкается здесь, как я, вот написанная мною версия 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);
});
1 голос
/ 27 июня 2014

Расширение ответа @ 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;
        }
    }
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...