如何在HTML输入字段中添加不可删除的后缀

Question

Using jQuery, how can I add a default suffix of , Demos into an input field that can't be removed, and that still allows you to type a content before suffix?

Default: ,Demos
Content: myText, Demos

Any help would be precious!

Answer 1

Here's a code that adds a suffix on change of an input field using Jquery:

$('#input').on('change focus unfocus', function(){
 var inputValue = $(this).val();
 var suffix = ", Demos";
 if(!(inputValue.indexOf(suffix) > -1)){
    var newVal = inputValue + suffix;
    $(this).val(newVal);
 }else{
 var suffixLength = inputValue.indexOf(suffix) + suffix.length;
 var len = inputValue.length - suffixLength;  
 if(len >0){ 
    $(this).val((inputValue.slice(suffixLength, inputValue.lenght))+suffix);
 }
 }

});

Here's a JSFiddle

You might have to consider what you want to do if a change is made after the suffix already is applied, either delete everything or keep everything but remove all the chars after the suffix. Also you might want to use a validation pattern to check if the suffix is applied.

EDIT: JSFIddle and code are updated to make the suffix pretty much unremovable.