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.