jQuery inputmask keeping placeholder text

Question

I'm using jquery.inputmask (https://github.com/RobinHerbots/jquery.inputmask) and I want to do something like this:

Have the initial input for an element be: "Hello my name is_" and then the cursor would start at the end and you could type in your name. Right now, I can do something like this by:

element.inputmask("Hello my name is",{ "placeholder": "Hello my name is" });

But as you type, it deletes the placeholder text. Is there a way to keep the placeholder text and add user input at the end?

Answer 1

As mentioned in my comment on your post, rather than using an input mask here you can just style label and input elements to look identical.

This isn't perfect (as I haven't catered for outline or the gap between inline-block elements (which is a different question, answered countless times)), but here's an example:

label, input {
  border: 1px solid #000;
  display: inline-block;
  font-family: sans-serif;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 4px;
  vertical-align: top;
}

input {
  border-left: none;
  margin-left: -1px;
}

label {
  border-right: none;
}

<label>Hello, my name is</label><input type="text" placeholder="..." />

Answer 2

<input value="your name is " onfocus="this.style.color='#000'"
       style="color:#aaa" onblur="this.style.color='#aaa'">