неизменяемые ведущие символы в HTML-вводе?

Question

Как создать элемент ввода, который имеет начальное значение по умолчанию там, которое невозможно заменить? Например, я ищу номер от пользователя, но я хочу, чтобы «333» был уже во входном текстовом поле, так как все входы начинаются с этого числа. Я также не хочу, чтобы пользователь мог изменить его. Мне нужен 333, чтобы быть частью ценности, а не просто добавляться через стиль, так как мне нужно сделать валидацию на нем.

Answer 1

Я бы предложил использовать 2 входа, которые выглядят как один вход, причем первый из них только для чтения. Смотрите эту скрипку: https://jsfiddle.net/39whrqup/2/

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

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

.nonstatic-input { 
    border: 0; 
} 

При чтении пользовательского ввода вы должны предварять статическую часть, естественно:

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

Answer 2

Я бы использовать 2 входа, как предложил William B, но я бы рассмотреть использовать ли атрибут disabled или атрибут readonly. Атрибут disabled не позволит сфокусировать первый вход, а стиль браузера по умолчанию придаст ему серый фон. Атрибут readonly позволит ему сфокусироваться и может иметь более желательный первоначальный стиль.

Answer 3

Один possibilty с помощью JavaScript:

nine = document.getElementById("nine"); 
 
nine.addEventListener("keydown", function (ev) { 
 
    var el = this; 
 
    var value = el.value; 
 
    setTimeout(function() { 
 
    if (el.value.indexOf("333") != 0) { 
 
     el.value = value; 
 
    } 
 
    }, 0); 
 
});

<input type="text" value="333" id="nine" />