javascript - 如何只允许在输入字段开头输入文本，并始终附加文本

Question

我以前有一个要求，即始终在文本输入字段中输入的内容前面添加(放在开头)一些静态文本，并且不允许删除该静态文本。我找到了一个非常有效的解决方案。

我的要求没有改变，我需要将一些静态文本附加(放在末尾)到文本框中输入的任何内容。我希望静态文本始终显示在文本框中，并且输入的任何文本都放置在静态文本之前。理想情况下，每当用户单击输入或按 Tab 键进入文本输入时，光标都会自动放置在文本输入中的“位置零”。

这是一个 fiddle ，它首先显示前置文本的工作示例，然后显示附加的非工作示例:

https://jsfiddle.net/dsdavis/x9d36veu/25/

当开始在第二个示例中键入时，您将看到只有最后键入的字符显示在框的开头。

我实现它们的方式之间的一个细微差别值得指出，那就是在工作示例中，我使用了“indexOf”:

$(document).ready(function() {
$('#prepend').keyup(function(e) {
  if (this.value.length < 16) {
    this.value = 'Student Worker - ';
  } else if (this.value.indexOf('Student Worker - ') !== 0) {
    this.value = 'Student Worker - ' + String.fromCharCode(e.which);
  }
});
});

在非工作示例中，我使用“lastIndexOf”:

$(document).ready(function() {
$('#append').keyup(function(e) {
  if (this.value.length < 17) {
    this.value = ' - Student Worker';
  } else if (this.value.lastIndexOf(' - Student Worker') !== 17) {
    this.value = String.fromCharCode(e.which) + ' - Student Worker';
  }
});
});

也许使用“lastIndexOf”是完全错误的，但这似乎是正确的方法。

谁能帮我想出一种方法来做到这一点？要始终在文本框中显示静态文本“- Student Worker”，并将输入的任何文本放在该静态文本之前？

谢谢!

   Doug

Answer 1

完全是另一种方法:

$(document).ready(function() {
  $('#append').on("input", function(e) {
     var s = this.value.replace(" - Student Worker", "");
     this.value = s + " - Student Worker";
  });
});