Question

我有这样的输入文字：

<input type="text" maxlength="11" class="text-right inputMust" onkeyup="value=value.replace(/[^\d]/g,'')">

我希望输入最多允许9个字符（包括小数，如果有的话），以及小数后最多4个字符（数字）。

注意：还应避免使用双句号/小数。

例如：

123456.1234 not allow
1234.1234 allow
123456789 allow
123456 allow
1234567890 not allow
12.3456 allow
12.34567 not allow
0.776 allow

Answer 1

以下是使用RegEx处理它的方法：

$(".checkNumber").keyup(function(e) {
  var element = $(".checkNumber");
  // check for the decimal validation    
  var testDecimal = (/^\d+(\.[0-9]{0,4})?$/.test(element.val()));
  // check the input value validation
  var testLength = (/^.{0,9}$/.test(element.val()));

  // if any condition fail then slice the input
  if (!testDecimal || !testLength) {
    element.val(element.val().slice(0, -1));
    return;
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="text-right inputMust checkNumber">

在这里，您可以使用原始JavaScript处理数据。

var numEl = document.getElementById('input-field');
numEl.onkeyup = function(e) {

  // handles validation for number
  if (!(e.key / 1)) {
    if (e.key != "." && numEl.value.charAt(numEl.value.length-1) == e.key) {
      numEl.value = numEl.value.slice(0, -1);
      return;
    }
  };

  // handles empty string and backpace
  if (!numEl.value.length || e.keyCode == 8) return;

  // handles the length
  if (numEl.value.length > 9) {
    console.log(numEl.value)
    numEl.value = numEl.value.slice(0, 9);
    return;
  };

  // handles double dot
  if (e.key == ".") {
    if (numEl.value.indexOf(".") != numEl.value.lastIndexOf(".")) {
      numEl.value = numEl.value.slice(0, -1);
      return;
    };
  };

  // handles length after dot
  if (numEl.value.indexOf(".") != -1) {
    var decNum = numEl.value.slice(numEl.value.indexOf("."), numEl.value.length);

    if (decNum.length > 5) {
      numEl.value = numEl.value.slice(0, -1);
      // return;
    };
    return;
  };

};

<input type="text" id=input-field class="text-right inputMust">

以下是使用jQuery处理它的方法：

$(".checkNumber").keyup(function(e) {
  var element = $(".checkNumber");

  // handles validation for number
  if (!(e.key / 1)) {
    if (e.key != "." && element.val().charAt(element.val().length - 1) == e.key) {
      element.val(element.val().slice(0, -1));
      return;
    }
  };
  // handles empty string and backpace
  if (!element.val().length || e.keyCode == 8) return;

  // handles the length
  if (element.val().length > 9) {
    element.val(element.val().slice(0, 9));
    return;
  };

  // handles double dot
  if (e.key == ".") {
    if (element.val().indexOf(".") != element.val().lastIndexOf(".")) {
      element.val(element.val().slice(0, -1));
      return;
    };
  };

  // handles length after dot
  if (element.val().indexOf(".") != -1) {
    var decNum = element.val().slice(element.val().indexOf("."), element.val().length);

    if (decNum.length > 5) {
      element.val(element.val().slice(0, -1));
      // return;
    };
    return;
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="text-right inputMust checkNumber">

Answer 2

您想要这样的东西

var input = "123.45"; //or any of your inputs
var pattern = /^\d+(\.[0-9]{1,4})?$/;
var nums = /\d/g;

if (typeof(input) !== "undefined"
    && (input.match(nums) || []).length <= 9
    && pattern.test(input)) {

    console.log("yes");
} else {
    console.log("no");
}

如何使HTML输入最大长度9位，最多9位整数和最多4位十进制？

2 个答案: