Как предотвратить удаление пользователем первых трех символов в текстовом вводе?

Question

У меня есть текстовый ввод, который имеет три динамически генерируемых символа Вкл. При загрузке страницы; что я хочу, так это то, что когда пользователь вводит данные в этом fieLd, пользователь не должен удалять первые три символа из ввода.

Ввод текста может содержать всего 10 символов, три, которые мы генерируем, и 7, введенные пользователем.

В настоящее время, если пользователь нажимает кнопку «назад», он может удалить все символы, но я не хочу, чтобы они удаляли первые три символа.

На загрузке страницы сценарий устанавливает три символа ввода текста Lab:

<input id="Lab" maxlength="10" name="LabWareId" type="text" value="" class="valid"> 

$('#Lab').keyup(function() { 
    if ($(this).val().length == $(this).attr('maxlength')) 
    $('#DateReceived').focus(); 
}); 

Answer 1

Вариант 1: Поместите префикс 3 символа за пределы ввода. Это лучшее из перспективы использования пользователей.

<p>abc <input id="Lab" maxlength="10" name="LabWareId" type="text" class="valid"></p> 

Вариант 2: Проверка и удаление слева нажатием клавиши предотвратить удаление соответственно.

$(document).on('keydown', function (e) { 
    if (e.keyCode == 8 && $('#Lab').is(":focus") && $('#Lab').val().length < 4) { 
     e.preventDefault(); 
    } 
}); 

Answer 2

Try это (это не самое лучшее решение, но оно работает):

Fiddle

$(document).ready(function() { 
    $("#tb").on("keyup", function() { 
    var value = $(this).val(); 
    $(this).val($(this).data("initial") + value.substring(3)); 
    }); 
}); 

Имейте в виду, что если я использую мышь, чтобы выделить первые 3 символа и переместить их в конце других текстов, он не будет жаловаться и не допускать того, чего вы не хотите.

Answer 3

Я бы, вероятно, поместил 3 сгенерированных символа слева от входа, поэтому пользователь не считает, что они доступны для редактирования. Вы можете сделать это красивым, используя bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<label for="basic-url">Enter thingy:</label> 
 
<div class="input-group"> 
 
    <span class="input-group-addon" id="basic-addon3">ABC</span> 
 
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" maxlength="7" placeholder="Enter 7 characters"> 
 
</div>

Answer 4

Я добавляю это решение в качестве другой альтернативы, которые могут быть полезны для кого-то.

Он использует метод jQuery before(). Он работает аналогично CSS before, но также и с входными элементами. Однако вам нужно добавить дополнительный стиль, чтобы префикс оказался внутри входа.

Также смотрите: Can I use the :after pseudo-element on an input field?

Выполните фрагмент кода, чтобы попытаться

$('#Lab').before('<span class="prefix">' + $('#Lab').data('prefix') + '</span>');

form { 
 
    background-color: lightgray; 
 
    padding: 2em; 
 
} 
 
#Lab { 
 
    border: 1px solid gray; 
 
    border-left: none; 
 
    width: 10em; 
 
} 
 
.prefix { 
 
    color: dimgray; 
 
    background-color: white; 
 
    border: 1px solid gray; 
 
    border-right: none; 
 
    font-family: monospace; 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input id="Lab" maxlength="10" name="LabWareId" type="text" data-prefix="123"> 
 
</form>