Doc library search box web part alter placeholder text

Question

I'm trying to change the default text "Find a file" to something else.

Does anyone have a fix for this?

This solution only works up to a certain point. When a user focuses in and out of the search box - placeholder text will default.

window.onload = function () { 
document.getElementById('inplaceSearchDiv_WPQ4_lsinput').placeholder = 'Ex: SMS12345';

document.getElementById('inplaceSearchDiv_WPQ4_lsinput').value= 'Ex: SMS12345';
}

or this..

window.onload = function () { 
  setTimeout(function () {
    document.getElementById('inplaceSearchDiv_WPQ2_lsinput').placeholder ='Ex: SMS12345';

    document.getElementById('inplaceSearchDiv_WPQ2_lsinput').value= 'Ex: SMS12345';

  }, 1000);//time to wait for in ms
}

Is there really no complete solution for this issue?

Thanks

Answer 1

You should handle the blur event of the input element as below

var form = document.getElementById("inplaceSearchDiv_WPQ1_lsinput");
form.addEventListener("blur", function( event ) {
    if(event.target.value == "" || event.target.value == "Find a file"){
        event.target.value = "Ex: SMS12345";
    }     
}, true);

Update

<script type="text/javascript"> 
    window.onload = function () {
        alert('Onload');
        document.getElementById('inplaceSearchDiv_WPQ4_lsinput').placeholder = 'Ex: SMS12345';
        document.getElementById('inplaceSearchDiv_WPQ4_lsinput').value= 'Ex: SMS12345';
        ExecuteOrDelayUntilScriptLoaded(startFunction, "sp.js");            
    } 
    function startFunction(){
        alert('Start Function');
        var form = document.getElementById("inplaceSearchDiv_WPQ1_lsinput"); 
        form.addEventListener("blur", function( event ) { 
            if(event.target.value == "" || event.target.value == "Find a file"){ 
                event.target.value = "Ex: SMS12345"; 
            } 
        }, true); 
    }
</script>