Question

我有一个输入。我只想要数值。我希望只有六个数字。我该怎么做？我有：

<input type="number" placeholder="YYMMDD" id="myKadA" maxlength="6" style="width:90px !important" onchange="checkMyKad()" size="8"  class="form-control block-centered ic-input" required>

有一个css可以从输入框中删除滚动条。

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: textfield; 
}

以前它是input type="text"而maxlength="6"限制为六个字符长。我现在如何指定仅6位数字

Answer 1

JAVASCRIPT WAY

HTML

<input type="number" placeholder="YYMMDD" id="myKadA" onkeydown="limit(this, 6);" onkeyup="limit(this, 6);" onkeyup="this.value = minmax(this.value, 0, 6)" required>

JS

function limit(element, max_chars)
{
    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}
function minmax(value, min, max) 
{
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        return 0; 
    else if(parseInt(value) > max) 
        return 100; 
    else return value;
}

HTML WAY

<input type="number" placeholder="YYMMDD" id="myKadA" maxlength="6" min="0"  max="6" required>

JQUERY WAY

<input type="number" placeholder="YYMMDD" id="myKadA" min="0" max="6" required>
var max_chars = 6;
$('#myKadA').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});
$("#myKadA").change(function() {
      var max = parseInt($(this).attr('max'));
      var min = parseInt($(this).attr('min'));
      if ($(this).val() > max)
      {
          $(this).val(max);
      }
      else if ($(this).val() < min)
      {
          $(this).val(min);
      }       
});

Answer 2

使用属性max和min作为输入类型编号

Answer 3

由于maxlength忽略了<input type"number"/>属性，如here所述。

您可以尝试使用以下内容添加一些javascript验证：

HTML

 <input onKeyDown="validateNum(event, this)" type="text" maxlength="6" max="6" min="6" placeholder="YYMMDD" id="myKadA" style="width:90px !important" onchange="checkMyKad()" class="form-control block-centered ic-input" required>

的Javascript

function validateNum(event, input) {
  event.preventDefault();
  var currVal = input.value ? input.value : "";
  // Checks if the key pressed is a number and the right length
  if(!isNaN(event.key) && currVal.length < 6){
    input.value = currVal + event.key;
  }
  // Backspace functionality
  else if(event.keyCode == 8 && currVal > 0) {
    input.value = input.value.slice(0, -1);
  }  
}

Answer 4

如果您只想在输入字段中输入数字，

<input type="number" max="6"/>

所以它渲染到输入类型编号字段，只允许6位数

Answer 5

this看起来像是一个很有希望的答案。

Answer 6

正如您在占位符-YYMMDD中提到的那样我建议你使用input type =“date”

Answer 7

最大长度不适用。你必须使用jQuery / Javascript。下面是一个工作片段。

<强> HTML：

<form>
    <label for="myKadA" class="control-label">Number:</label>
    <input type="number" id="myKadA" data-max="6" class="form-control" required>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<强> jQuery的：

<script>
    $(document).ready(function () {
        $(".btn-primary").click(function (e) {
        e.preventDefault();

        var keyObj = $("#myKadA");
        var maxLength = parseInt(keyObj.attr('data-max'));

        if((keyObj).val().length !== maxLength){
            alert("You must enter exactly " + maxLength + " digits");
        }
        });
    })
</script>

Answer 8

尝试

<input type="number" onKeyPress="if(this.value.length==6) return false;"/>

否则您可以将输入类型更改为“月”

<input type="month" min="2018-03" value="2018-05">

希望这行得通。

html数字输入仅允许6位数

8 个答案: