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

2
  • are you need to change the default find an item for a specific list ? also are you face issue in the above code ? Commented Aug 27, 2016 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
    Commented Aug 27, 2016 at 14:43

1 Answer 1

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>
8
  • 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
    Commented Aug 27, 2016 at 14:47
  • This should go inside the window.load function.. or better use ExecuteDelay that is recommended for SharePoint Commented Aug 27, 2016 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
    Commented Aug 28, 2016 at 4:08
  • @HoooooP sorry for the delay.. try my updated answer. Commented Aug 31, 2016 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
    Commented Aug 31, 2016 at 2:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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