Onclick text disappears in chrome but not in mozilla_问答_开发者

Onclick text disappears in chrome but not in mozilla

开发者 https://www.devze.com 2023-01-19 10:18 出处：网络

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 fire

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开发者_JAVA技巧 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.

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...