Question

To save space (and keep things more compact) I added a input box with a placeholder stating

<input id="username-search" placeholder="view another users work">

after adding the username, I’d like to change the text of the placeholder to something like

<input id="username-search" placeholder="viewing -theuser-'s work">

as well as remove the text added to the input box by the user, as when text is entered, the placeholder disappears.

Any ideas?

Answer 1

You can change the placeholder attribute dinamically as you need in an onchange event handler for the <input type="text"> :

<input id="username-search" placeholder="view another users work"
               onchange="changePlaceholder(this)">
<script>
function changePlaceholder(input){
    if (input.value == '') { 
        input.placeholder = "view another users work";
    }
    else {
        input.placeholder="viewing " + input.value + "'s work";
        input.value="";
    }
}
</script>

JSFiddle.

Take into account that the <input>‘s value will be cleared after onchange(), so you might want to keep an <input type='hidden'> with the last inputted value if there’s something you wish to do with it outside onchange.