Как я могу предотвратить выбор-удаление части строки во входе, в то же время позволяя пользователю писать остальные

Question

У меня есть поле ввода, которое скрыто, пока пользователь не выберет select. Этот выбор приводит к частичному заполнению ввода.

$('#manufacturer').on('change', function() {
    $('#manf_id').val('');
    $('#manufacturerInput').val('');
    if ($(this).val() == 'other') {
        $('#next').removeClass('btn-primary').addClass('btn-secondary').prop('disabled', true);
        $('#manufacturerInput').prop('disabled', false).attr('placeholder', 'enter');
    } else {
        $('#manufacturerInput').prop('disabled', true).attr('placeholder', '');
        $('#next').removeClass('btn-secondary').addClass('btn-primary').prop('disabled', false);

        var short = $(this).val().substring(0, 3).toUpperCase();
        $('#manf_id').val(short + '_');
    }
});

Поэтому, когда пользователь видит поле ввода #manf_id, строка по умолчанию для ввода - ie. SONY_, и они должны иметь возможность добавить что-то для создания manf_id, например SONY_playstation. Пользователь не должен иметь возможность забивать дальше, чем PlayStation, так что SONY_ всегда рядом.

$("#manf_id").on('keydown', function(e) {
    if ($(this).val().length < 5) {
        if (e.which === 8) {
            e.preventDefault();
        }
    }
});

Это прекрасно работает. Проблема в том, что пользователь может дважды щелкнуть или CTRL / CMD + A и удалить всю строку.

Я нашел css и jQuery способы запрета выбора, но это также предотвращает нажатие и запись (без приглашения).

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

<input class="form-control noselect" type="text" placeholder="ID" id="manf_id"/>

Существует ли решение, позволяющее предотвратить удаление или удаление пользователем части или всей строки (включая то, что они написали), в то же время позволяя возврат к определенному символу (как указано выше) а также разрешить запись на входе?

Answer 1

Простейшим способом было бы установить значение ввода, которое вы хотите видеть, когда его длина слишком мала, например:

$("#manf_id").on('keydown', function(e) {
    if ($(this).val().length < 5) {
        $(this).val("SONY_")
    }
});