Separate Placeholder Text In Form's Input Field With Input String In The Middle

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 fo

Solution 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.