Separate placeholder text in form's input field with input string in the middle

Question

I have a form field in my Rails app with a placeholder. I'd like to divide the placeholder when you focus on the form so that the actual input of the form sits in between it. So for example the placeholder would be like:

Placeholder "input string" placeholder

I'd like to fashion the field so that:

1. Clicking on it would place the cursor at "input" between the placeholder.
2. Any text entered does not overflow over the remainder of the placeholder.

Is that possible?

Answer 1

Have you considered something like:

<label for="foo">Placeholder 
  <input id="foo" name="foo" value="input string"> placeholder</label>

combined with CSS to make the input flow with the surrounding text? Requires zero javascript and works everywhere.