3

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

  • are you need to change the default find an item for a specific list ? also are you face issue in the above code ? – Mohamed El-Qassas MVP Aug 27 '16 at 12:02
  • Yeah specific list. When the page loads the value I set indeed takes effect. However it's defaulting to "Find a file" when I focus in&out of the search box. – HoooooP Aug 27 '16 at 14:43
2

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>
  • Amal, the code you provided does not work for me. injected it in a Script web part with the correct id. Does not seem to do anything. – HoooooP Aug 27 '16 at 14:47
  • This should go inside the window.load function.. or better use ExecuteDelay that is recommended for SharePoint – Amal Hashim Aug 27 '16 at 15:03
  • can you please provide the full code that works. I was trying this but it doesn't take. <script type="text/javascript"> window.onload = 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> – HoooooP Aug 28 '16 at 4:08
  • @HoooooP sorry for the delay.. try my updated answer. – Amal Hashim Aug 31 '16 at 1:56
  • Thank you very much for the updated script. I've noticed that your code only works for me once I focus into the searchbox with my mouse cursor (it works every time after that). If I don't focus into the field the placeholder text stays as default. Do you have any idea how to overcome this ? – HoooooP Aug 31 '16 at 2:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.