1

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

Picture of find a file

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.

After1

Now I click on the input:

enter image description here

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.

3

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.

  • So it seems that document.ready / document.addEventListener("DOMContentLoaded" don't cut it here. The web part that is the document library doesn't load until after document.ready fires, I am able to replicate my console work by placing the placeholder setting code in a 3 sec timeout function, though that still doesn't give me good results (see question update) – Aaron May 17 '16 at 14:04
  • You can use document.addEventListener("DOMContentLoaded", function(event) { in place of jquery's $(document).ready(function () { – Aaron May 17 '16 at 14:15
  • there are couple of techniques to avoid that here stackoverflow.com/questions/16936250/… – Ahmed Mahmoud May 17 '16 at 15:18
  • 1
    @Aaron see updated code. Didn't get it to quite work properly on IE10 but the value set call works a pseudo placeholder in this instance (if you click on the search box it wipes the value) – Roland May 17 '16 at 23:44
  • 1
    @Aaron Ah the page i tested it on had a lot of additional stuff that seems to have slowed the page down to enable the original code to work properly. I have added an update that sets it to shortly after page loads – Roland May 18 '16 at 23:38
0

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>
  • How does this solve the issue above? Can you elaborate? – Robert Lindgren May 17 '16 at 13:34
  • There is a problem with this code before we get to the issue at hand. The 2nd line of code will run before the input inplaceSearchDiv_WPQ1_lsparent has been created, so no effect. – Aaron May 17 '16 at 14:06

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.