title: How can I make a split-text input placeholder?
body: <p>What I'm trying to do could perhaps best be explained in an image (which I'll include below), but essentially it's a text <code>input</code> HTML field which is half a pre-existing value and the other half is replaceable.  I tried adding both a <code>value</code> and a <code>placeholder</code> field and then separating them via <code>padding-left</code> in CSS, but instead the browser (Chrome) just ignores the <code>placeholder</code> altogether.</p>
  
  <p><img src="https://i.stack.imgur.com/gMWQ8.png" alt="An example image"></p>
  
  <p>Note the separation between the string "turingpages.com/" and "username".  I want to keep "turingpages.com/" un-editable and have "username" act as an HTML5 placeholder.  How could I go about achieving this effect?</p>