Unchangeable Leading Characters In Html Input?

How do I generate an input element that has a default starting value in there that is unchangeable? For example, I am looking for a number from the user but I want '333' to be alr

Solution 1:

I'd use 2 inputs as William B suggested but I'd consider whether to use the disabled attribute or the readonly attribute. The disabled attribute won't allow the first input to be focused and the default browser styling will give it a gray background. The readonly attribute will allow it to be focused and may have a more desirable initial styling.

Solution 2:

I'd suggest using 2 inputs that look like a single input, with the first one readonly. See this fiddle: https://jsfiddle.net/39whrqup/2/

<input readonly value="333"class="static-input">
<inputclass="nonstatic-input">

.static-input {
  margin-right: -20px;
  width: 50px;
  border: 0;
}

.nonstatic-input {
  border: 0;
}

When reading the user input you will have to prepend the static portion, naturally:

var userInput = document.querySelector('input.static-input').value +
                document.querySelector('input.nonstatic-input').value;