JS/Jquery, is there a way to populate my input text with fixed string and leading zeros?

Question

I am planning to have an input textbox with leading string and zeros with maximum length of 6 leading zeros. When user type in the input box, the leading zero will be erase until it reach max 6 letters. The initial string is fixed and cannot be erase.

For example,

JS000000 //a fixed string (which is the letter 'JS') followed by 6 leading zeros
JS000010 //user has typed the letter '10'
JS123456 //user has typed the letter '123456' and cannot be type further

HTML

<input type="text" name="js" class="form-control" id="js_leading_zero">

JS/JQUERY

$('#js_leading_zero').on('keyup', function() {
    console.log('i really have no ideas what to do here')
});

Answer 1

An alternative to managing the caret of an input would be to use a focus-able div with some css to "fake" the "JS" part*.

Then you can handle the keyup on the input with relatively minimal code - this is just for concept, you'd probably want it a bit neater with some decent variable names and storing the val on the input itself so its reusable:

var val = 0;
$("#inp").on("keyup", function(e) {
  var c = String.fromCharCode(e.which);
  if (c >= '0' && c <= '9' && (val + "").length < 6) {
    val = (val * 10) + (c * 1);
  }
  if (e.which == 8) {
    val = Math.floor(val / 10);
  }
  $(this).text(("000000" + val).slice(-6))
})

div:focus { 
/* stupid chrome currently puts an ugly black border, so need something else border:1px solid red; */
background-color: aqua;
}

.inpwrapper {
  border:1px solid #CCC;
  padding:2px;
}
.inpwrapper span { float:left; margin: 2px 0 2px 0; }
.inpwrapper div { margin:2px 6px 2px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='inpwrapper'>
  <span>JS</span>
  <div id="inp" tabindex="0">000000</div>
</div>

<hr /> another input to demonstrate tab-focus
<input type='text'>

(*) actually, no need for the "fake" css part, can use: .text("JS" + ("000000" + val).slice(-6))

Answer 2

With my suggestion from comments to use the "JS" portion as a separate entity, and the blur and focus Events - but also to allow for resetting the input to a new value.

The trick is to store the current value into the Elements placeholder. If on blur no value was entered, use again the placeholder value as the Element actual value:

const updateVal = (ev) => {
  const EL = ev.currentTarget;
  EL.value = EL.value.length ? EL.value.padStart(6, '0') : EL.placeholder;
  EL.placeholder = EL.value;
};

const clearVal = (ev) => {
  const EL = ev.currentTarget;
  EL.value = "";
};

const inputField = document.querySelectorAll('.js_leading_zero');
inputField.forEach(EL => EL.addEventListener("blur", updateVal));
inputField.forEach(EL => EL.addEventListener("focus", clearVal));

* {box-sizing: border-box;}

.js_leading_zero_label {
  border: 1px solid #000;
  font: 1em sans-serif;
  padding: 4px;
}

.js_leading_zero {
  outline: none;
  border: none;
  background: transparent;
  font: 1em sans-serif;
}

<label class="js_leading_zero_label">
  JS<input type="text" class="js_leading_zero" placeholder="000000" maxlength="6">
</label>
<label class="js_leading_zero_label">
  JS<input type="text" class="js_leading_zero" placeholder="000000" maxlength="6">
</label>

Answer 3

As suggested by @RokoC.Buljan You can change the value on blur, otherwise, there are just too many things that you need to consider.

One such example:

const inputField = document.getElementById('js_leading_zero')

inputField.addEventListener('blur', updateInput);

function updateInput(e) {
  inputField.value = inputField.value.padStart(6, '0')
}

JS<input type="text" name="js" class="form-control" id="js_leading_zero" placeholder="000000" maxlength="6">

Update: @RokoC.Buljan's approach to update placeholder is one innovative way: https://jsfiddle.net/RokoCB/bdzyughs/2/

Answer 4

As others have noted, what you're asking for would be quite complicated to implement. You could consider just setting max-length, making the initial value "JS", and do a regex check.

$('#js_leading_zero').on('change', function(ev) {
  if (!/^JS.{0,6}$/.test(ev.target.value)) {
    this.classList.add("invalid")
  } else {
    this.classList.remove("invalid")
  }
});

.invalid {
  outline:2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="JS" maxlength="8" class="form-control" id="js_leading_zero" placeholder="JS000000">

Answer 5

Answered by @Roko C.Bujian in comment section referring to jsfiddle link from him

HTML

<input type="text" class="js_leading_zero" value="JS000000" maxlength=8>

JS

const prefix = "JS";

const modifyVal = (ev) => {
    const EL = ev.currentTarget;
    let str = EL.value.replace(/\D/g, "");
    str +=  EL.dataset.key;
    const int = parseInt(str);
    str = String(int).padStart(6, "0");
    if (str.length === 6)
    EL.value = prefix + str;
};

const rememberKey = (ev) => {
    ev.preventDefault();
    const EL = ev.currentTarget;
    EL.dataset.key = ev.key;
};

const ELs_inp = document.querySelectorAll(".js_leading_zero");
ELs_inp.forEach(EL => EL.addEventListener("keydown", rememberKey));
ELs_inp.forEach(EL => EL.addEventListener("keyup", modifyVal));