Home/ Questions/Q 3234436
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T17:23:29+00:00

I have search functionality in my app, in which when user clicks in textbox,

  • 0

I have search functionality in my app, in which when user clicks in textbox,
the text in the text box disappers. This works perfectly in chrome(6.0) but does not disappear after click in mozilla firefox(3.6) why?

// here is the code: 

echo "Search: ";
            echo "<input type=\"text\" class=\"smalltxt\" name= \"srchtxt\" id= \"srchtxt\" value= \"enter username\" height=\"20px\" onfocus= \"javascript:areaOnFocus(srchtxt, 'enter username');\" onblur= \"javascript:areaOnBlur(srchtxt, 'enter username');\" />";

// function called:

function areaOnFocus(element, inputText)
    {
         if(element.value == inputText)
         {
              element.value='';
         }
    }

    function areaOnBlur(element, inputText)
    {
         if(element.value=='')
         {
              element.value = inputText;
         }
    }

Thank you in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you don’t need javascript: in the inline event handlers.
    Secondly, try to pass this instead of srchtxt as the first argument for both functions.
    Passing just srchtxt probably causes the browser to find the element with the specified name, but this doesn’t work in Firefox if I remember well.
    The final code should look like this:

    echo "<input type=\"text\" class=\"smalltxt\" name= \"srchtxt\" id= \"srchtxt\" value= \"enter username\" height=\"20px\" onfocus= \"areaOnFocus(this, 'enter username');\" onblur= \"areaOnBlur(this, 'enter username');\" />";

    EDIT: @down: this is impossible, because I’ve tried the following code:

    <html>
<head>
<script type="text/javascript">
function areaOnFocus(element, inputText)
{
    if(element.value == inputText)
    {
        element.value='';
    }
}

function areaOnBlur(element, inputText)
{
    if(element.value=='')
    {
        element.value = inputText;
    }
}
</script>
<title>test</title>
</head>
<body>
<input type="text" class="smalltxt" value="enter username" height="20px" onfocus="areaOnFocus(this, 'enter username');" onblur="areaOnBlur(this, 'enter username');" />
</body>
</html>

    in my Firefox 3.6.10 and it worked well – when the page has loaded, the input’s value was “enter username”. When I clicked it, the text disappeared. And when I left the field empty and removed the focus, “enter username” appeared again in it. So…

    • 0