Как прибить инпут?

Question

[Максим Семилеткин]

Добрый, господа. Делаю инпут с вводом кода из смс. Сделал как у всех, сделал межбувенное расстояние в 50 пкс. Подключил js, чтобы следить за количеством цифр. И тут проблема возникла. При вводе 4 цифр, которые умещаются в мой инпут он блюрится , но каретка(или как это называют) двигается вправо. Оч неудобно. Как я могу запретить инпуту смещаться вправо или как можно заставить его не следить за курсором ?

Comments

[Александр]

предоставьте код, если можно

[Максим Семилеткин]

<form class="modal-cart__new-form" id="form-register" method="post" action="{{ route('profile.register') }}">
    <div class="modal-cart__new-first" data-register-first>
        <input type="text" name="phone" class="modal-cart__new-input" placeholder="Введите ваш телефон" required>
        <button type="button" class="button button-secondary modal-cart__new-button button-white button-white__black" data-register-step>Получить код</button>
    </div>
    <div class="modal-cart__new-second" data-register-second>
        <div class="modal-cart__separator">
            <input type="text" maxlength="4" name="phone" class="modal-cart__new-input modal-cart__new-input--code" autocomplete="off" placeholder="" required>
            <svg class="icon svg-separator">
                <use href="{{ asset('images/icons.svg') }}#separator"></use>
            </svg>
        </div>
        <button type="submit" class="button button-secondary modal-cart__new-button button-white button-white__black">Зарегистрироваться</button>
        <p class="modal-cart__new-links">
            <span class="modal-cart__new-link link" data-modal-toggle="#modal-reset">Не приходит смс?</span><br>
        </p>
    </div>

</form>



Это html

[Максим Семилеткин]

$(function() {
    $(document).on('click', '[data-register-step]', function(e) {
        console.log('123');
        e.preventDefault();
        $('[data-register-first]').fadeOut(400, function() {
            $('[data-register-second]').fadeIn();
            $('[data-register-title]').html('Введите код');
            $('[data-register-second]').find('input').focus();
            let i=0;
            $(document).on('input', '[data-register-second] input', function(e) {
                if(i<3){
                    console.log(i)
                    console.log(e);
                }else{
                    i=0;
                    $(this).blur();
                }
                i++;
                console.log($(this).attr('value'));
            });

        });
    });

});

js

[Арсений Матыцин]

Максим Семилеткин, https://codepen.io/

Answer 1

[Алексей Демидов]

Задать input-у атрибут maxlength="4". Больше 4 символов не даст ввести.
<input maxlength="4"/>
Думаю поможет