Как установить максимальную длину входного тега с помощью 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

Вы сделали 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 2

Атрибут Мин. И Макс. Не работает для типа ввода html5 с номером <input type="text" pattern="\d*" maxlength="10" />, а также присоединяется к событию javascript, чтобы гарантировать, что значение является числом в качестве отката к атрибуту шаблона

Answer 3

Согласно вашему коду, вы можете использовать приведенную ниже логику.

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