JSFiddle - React, Tailwind, and code Playground

HTML

<label id="lbl" for="txt1"></label>
<input type="text" id="txt1" name="type_name" value="" />
<br/>
<input type="text" id="txt2" name="type_name" value="Value1-" /><br/>
<hr/>
<h3>Most efficient way</h3>
<input type="text" id="txt3" name="type_name" value="Value1-" />

CSS

#lbl:after {
    content:'Value1-';
    position:absolute;
    top:16px;
    left:12px;
}
#txt1 {
    border: 1px solid #d7d6d6;
    padding: 10px 10px 10px 50px;
}

JavaScript

$('#txt1').change(function () {
    $('body').append('Value1-' + $(this).val());
});

$('#txt2').change(function () {
    var str = $(this).val().replace('Value1-', '');
    $(this).val('Value1-' + str);
});
$('#txt3').keypress(function (e) {
    var pos = $(this).getCursorPosition();
    if (pos < 7 ||(pos==7 && e.keyCode == 8) ) {
        e.preventDefault();
    }
    console.log(pos);
});
$.fn.getCursorPosition = function () {
    var input = this.get(0);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input) {
        // Standard-compliant browsers
        return input.selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        return sel.text.length - selLen;
    }
}