CODEWITHSUNDEEP
javascriptjquery
Doug Davis
Doug Davis

Reputation: 65

How Can I Only Allow Text Entry at Start of Input Field, and Always Append Text

I previously had a requirement to always prepend (to put at the beginning) some static text to whatever was entered in a text input field, and to never allow that static text to be deleted. I found a solution that works really well.

Not my requirement has changed, and I need to append (to put at the end) some static text, to whatever is entered in a text box. I'd like the static text to be displayed in the text box at all times, and for any text entered to be placed before the static text. Ideally, the cursor would automatically be placed at "position zero" in the text input whenever a user clicks on the input, or tabs into it.

Here's a Fiddle that shows first the working example of the text being prepended, and then the non-working example of the appending:

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

When one starts typing in the second example, you'll see that only the last character typed is displaying at the beginning of the box.

A slight difference between how I implemented them that is worth pointing out, is that in the working example, I use the "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);
  }
});
});

and in the non-working example, I use "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';
  }
});
});

Maybe using "lastIndexOf" is totally wrong, but it seemed like the right way to go.

Can anyone help me come up with a way to do this? To always display the static text " - Student Worker" in the text box, and to put any text that is entered before that static text?

Thank you!

   Doug

Upvotes: 0

Views: 713

Answers (1)

dandavis
dandavis

Reputation: 16726

another approach entirely: 

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

Upvotes: 1

Related Questions