I want to append prefix and suffix to a input value. for example my prefix is ABC and my suffix is DEF, now when an user type something to input then I want to append ABC-USERVAL-DEF that is (Prefix-user input-Suffix).Please help me out. I have tried something like this.
$("#input").on("keyup", function() {
var prefix = 'ABC-'
var suffix= '-DEF'
var final = prefix + $(this).val() + suffix;
$(this).val('');
$(this).val(final);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id="input" val=''>I have used @shrys code and enhance that code for backspace.
$("#input").on("keyup", function(e) {
var prefix = 'ABC-';
var suffix = '-DEF';
var val = $(this).val().replace(prefix, '').replace(suffix, '');
var final = prefix + val + suffix;
$(this).val(final);
});
$("#input").on("keydown", function(e) {
var key = event.keyCode || event.charCode;
var prefix = 'ABC-';
var suffix = '-DEF';
if( key == 8 || key == 46 ){
var val = $(this).val().replace(prefix, '').replace(suffix, '');
$(this).val(val);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id="input" val=''>credits to @shrys
I would like to thank @shrys for the answer and that solves my problems for now.
$("#input").on("keyup", function(e) {
var prefix = 'ABC-';
var suffix = '-DEF';
var val = $(this).val().replace(prefix, '').replace(suffix, '');
var final = prefix + val + suffix;
$(this).val(final);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id="input" val=''>// I think there's a little bit of that with chang
$("#input").on("change", function (e) {
let value = $(this).val();
const prefix = 'ABC-';
const suffix = '-DEF';
value = value.replace(/(^ABC-)|(-DEF$)/g, '');
$(this).val(prefix + value + suffix);
});