JavaScript to clear SharePoint Text Filter box on focus

Question

I am using the following code to clear default value which is "Keyword ...." from a SharePoint text filter box. I put in an alert at line 10 but it doesn't pop-up. Do you any reason why it would not clear the Text Box when a user clicks inside the box to type something.

<script type="text/javascript">
    // Clears text box on click or focus    
    var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");     
    TextBoxID.focus(function()
    {
        if(this.value == "Keyword ....")
        {
            alert('test line 10');
            $(this).val("");
        }   
    });     
</script>

Answer 1

It looks like you may have an error in your jQuery selector.

Should that have been $('#'+searchID).focus(...)?

If not, I was mislead by the reuse of "searchID" as a local variable and the name of a class on an element.

Answer 2

Try something like this?

HTML

Search Box: <input onclick="clearPlaceholder();" id="ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl" type="text" name="fname" value="Keyword..."><br>

JS

function clearPlaceholder(){
    var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");

    TextBoxID.value = "";
}

http://jsfiddle.net/z5h6H/2/

Answer 3

Here is the code that solved the issue. I needed to clear the value in the text field when user click inside the text box.

<script type="text/javascript">
// Clears text box on click or focus
var TextBoxID = document.getElementById('ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0815182c6012_SPTextSlicerValueTextControl');
    TextBoxID.onfocus = function(){
        if(this.value == 'Keyword ....')
        {           
            TextBoxID.value="";
        }   
    };  
</script>