JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" placeholder="defaultText" class="input">
JavaScript
$(function(){
var dft = 'DEFAULT - ';
$('input.input').keyup(function(evt){
/* Key up event to catch all keys, keypressed doesn't catch i.E.
backspace*/
/* If input value is empty don't alter it, that keeps input clean */
if($(this).val() != ''){
/* attach value of input to variable to alter it in future */
var txt = $(this).val();
/* txt.replace removes already added default text to prevent infinite prepending */
$(this).val(dft + txt.replace(dft, ''));
}
}).keydown(function(evt){
/* Key down is to catch user before he deletes part of default text and remove whole for him. That keeps it clean in future. */
if($(this).val() == dft){
/* Set input empty when user's trying to delete default text */
$(this).val('');
/* blocks further parsing */
return false;
}
});
});