How to prevent a user from removing the first three characters in a text input?

Question

I have a text input, which has three dynamically-generated characters On when page-load; what I want is that when a user enters data in that fieLd the user should be unable to remove that first three characters from the input.

The text input can contain 10 characters in total, three which we generate and 7 entered by the user.

Currently if the user presses backspace he can delete all characters, but I don't want to allow them to delete the first three characters.

On page-load the script sets three characters in the Lab text input:

<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

Option 1 : Put the 3 character prefix outside of the input. This is the best from a user experience perspective.

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

Option 2 : Check for backspace keypress and prevent the delete accordingly.

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

Answer 2

Try this (it's not the best solution but it works):

Fiddle

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

Mind you that if I use my mouse to highlight the first 3 characters and move them at the end of the other texts, it won't complain and allow it which is not what you want.