Change the Placeholder Text for the Find a file search box for document libraries' web parts

Question

I'm trying to change the placeholder text that says Find a file in the search box that is part of Document Library web parts. I've looked through the html on the page and it doesn't seem to be in there, so I must be missing something.

I want to change it to something like Ex: SMS12345

Update:

The id of the input that is that item: inplaceSearchDiv_WPQ4_lsinput

running: document.getElementById('inplaceSearchDiv_WPQ4_lsinput').placeholder in the console returns ""

Setting it: document.getElementById('inplaceSearchDiv_WPQ4_lsinput').placeholder = "test-test-test" does not have the anticipated results. Sharepoint must be doing something else behind the scenes. Both pictures are After running these commands in console.

Now I click on the input:

Solution: The script that finally got everything working mostly as expected

<script type="text/javascript">
setTimeout(function () {
document.getElementById('inplaceSearchDiv_WPQ4_lsinput').placeholder ='Ex: SMS1234';
document.getElementById('inplaceSearchDiv_WPQ4_lsinput').value= 'Ex: SMS1234';
}, 800);//time to wait for in ms
</script>

A few notes: Sharepoint seems to not use the built-in placeholder functionality, it instead adds a value to the input with the text "Find a File".

So you can set the value of the input, and it renders correctly. However, when you click on the input, it clears this value and shows the placeholder value (default "") and when you click off of the input, it replaces the value back with "Find a File", erasing your javascript work.

On top of that, using something like window.onload or jquery's document.ready or document.addEventListener("DOMContentLoaded" don't fire late enough to have the input available to be set, the only way I could get it was to use a timeout to get the javascript to fire

Lastly, and this caused me some trouble, if you don't include the type in the script tag (<script> instead of <script type="text/javascript">) it will work in edit mode but the javascript will not run once the page is saved.

Answer 1

You can do it quite simply by including a little bit of JavaScript on the page.

Either add it through a script web part of save to a file and add the file through a content web part.

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

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

Edit: I did a stupid and used Jquery and native JS at the same time. The above code is tested in chrome and Firefox and works as expected. In IE10 for some reason only the value set works.

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
}

Looks like SP does stuff in a strange way. As a work around have the code set to run shorty after the page loads (in example it is 1 second). By having the code run shortly after page run there should be minimal loss of user experience as only a sharp eye would detect that the wording on a search bar has changed 1 second after the page loads.

Answer 2

You can add a Script Editor Web part on the page (and you can hide it from Script editor properties) and add a script tag to jQuery like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

<script> $( "#inplaceSearchDiv_WPQ1_lsparent :input").attr('placeholder','Ahmed'); </script>