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

Question

使用 jQuery，如何将默认后缀 , Demos 添加到无法删除的输入字段中，并且仍然允许您在后缀之前键入内容？

默认：,演示
内容：myText、Demos

任何帮助都是宝贵的！

Answer 1

这是一个使用 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);
 }
 }

});

这是JSFiddle

如果在应用后缀后进行更改，您可能需要考虑要做什么，要么删除所有内容，要么保留所有内容，但删除后缀后的所有字符。 此外，您可能希望使用验证模式来检查是否应用了后缀。

编辑： JSFIddle 和代码已更新，使后缀几乎不可删除。