如何使用jquery设置输入标签的最大长度？

Question

我有一个数字键盘和<input>。

我正在使用下面的数字键盘在输入标签中输入手机号码 我想将输入的最大length设置为8 我使用了几种方法，但是其中只有在使用数字键盘时键盘输入不起作用的情况下，最大长度才有效 有人可以帮我

我尝试过

$(".num-text").attr({
  "max" : 10,        
  "min" : 10          
});

这是我的代码

html

    <div id="zeroseven">07<input id="numBox" class="num-text" name='tel' oninput="javascript:  this.value = this.value.slice(0, this.maxLength);" type = "number" maxlength = "8"/></div><br><br>
<div class="numpad">
        <button class="numbers" value="1">1</button>
        <button class="numbers" value="2">2</button>
        <button class="numbers" value="3">3</button>
        <button class="numbers" value="4">4</button>
        <button class="numbers" value="5">5</button>
        <button class="numbers" value="6">6</button>
        <button class="numbers" value="7">7</button>
        <button class="numbers" value="8">8</button>
        <button class="numbers" value="9">9</button>
        <button id="clear" class="numbers" >&larr;</button>
        <button class="numbers" value="0">0</button>
        <button id="delete" class="numbers">DEL</button>
</div>

jquery

         //Onlick numpad button
        $( ".numbers" ).on('click',function(evt) {
            $(".num-text").val(($('.num-text').val()) + (this.value));
            var length = $('.num-text').val().length;
            if (length > 8){

            }
        });

我需要它，以便在length >8之后停止输入更多数字

Answer 1

根据您的代码，您可以使用以下逻辑。

$(document).ready(function() {
  $(".numbers").on('click', function(evt) {
    var length = $('.num-text').val().length;
    if (length >= 8) {
      evt.preventDefault();
    } else {
      $(".num-text").val(($('.num-text').val()) + (this.value));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zeroseven">07<input id="numBox" class="num-text" name='tel' oninput="javascript:  this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="8" /></div><br><br>
<div class="numpad">
  <button class="numbers" value="1">1</button>
  <button class="numbers" value="2">2</button>
  <button class="numbers" value="3">3</button>
  <button class="numbers" value="4">4</button>
  <button class="numbers" value="5">5</button>
  <button class="numbers" value="6">6</button>
  <button class="numbers" value="7">7</button>
  <button class="numbers" value="8">8</button>
  <button class="numbers" value="9">9</button>
  <button id="clear" class="numbers">&larr;</button>
  <button class="numbers" value="0">0</button>
  <button id="delete" class="numbers">DEL</button>
</div>

Answer 2

您完成了99.9％

 $(".num-text").val(($('.num-text').val()) + (this.value)); 

只要把它放进案子

        $( ".numbers" ).on('click',function(evt) {            
            var length = $('.num-text').val().length;
            if (length < 8){
            $(".num-text").val(($('.num-text').val()) + (this.value));
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zeroseven">07<input id="numBox" class="num-text" name='tel' oninput="javascript:  this.value = this.value.slice(0, this.maxLength);"
            type = "number"
            maxlength = "8"/></div><br><br>
            <div class="numpad">
                    <button class="numbers" value="1">1</button>
                    <button class="numbers" value="2">2</button>
                    <button class="numbers" value="3">3</button>
                    <button class="numbers" value="4">4</button>
                    <button class="numbers" value="5">5</button>
                    <button class="numbers" value="6">6</button>
                    <button class="numbers" value="7">7</button>
                    <button class="numbers" value="8">8</button>
                    <button class="numbers" value="9">9</button>
                    <button id="clear" class="numbers" >&larr;</button>
                    <button class="numbers" value="0">0</button>
                    <button id="delete" class="numbers">DEL</button>
            </div>

Answer 3

最小和最大属性不适用于html5输入类型编号 <input type="text" pattern="\d*" maxlength="10" />并附加到它的javascript事件，以确保该值是一个数字，作为pattern属性的后备