CODEWITHSUNDEEP
javascripthtml
Christopher Orchard
Christopher Orchard

Reputation: 1367

Html/Javascript - Onfocus event

So, I am attempting to ensure that the page I am working on works cross browser and to do this I have attempted to call the 'onfocus' event within <script> tags - Unfortunately what I have tried isn't working and currently I am unsure why. Any advice/feedback would be appreciated.

<input name="searchField" placeholder="Search users" type="text" size="60"
    maxlength="150" id="SearchBox" style="margin-top:15px; height:auto;" />

<script type="text/javascript">
    if (!("placeholder" in document.createElement("input"))) {
        document.getElementsByName("searchField")[0].value = 'Search users';
        document.getElementsByName("searchField")[0].onfocus =
            'document.getElementsByName("searchField")[0].value="";';
    }
</script>

Upvotes: 1

Views: 3714

Answers (2)

mehdi
mehdi

Reputation: 1755

it's work..

<input name="searchField" placeholder="Search users" type="text" size="60" maxlength="150" id="SearchBox" style="margin-top:15px; height:auto;"/>
      <script type="text/javascript">
        if (!("placeholder" in document.createElement("input")))
        {
            document.getElementsByName("searchField")[0].value='Search users';
            document.getElementsByName("searchField")[0].onfocus=function(){
                 document.getElementsByName("searchField")[0].value="";
            };
        }
    </script>

Upvotes: 0

Halcyon
Halcyon

Reputation: 57723

A better way to add events is:

document.getElementsByName("searchField")[0].onfocus = function () {
    document.getElementsByName("searchField")[0].value = "";
                                // ^ fixed that typo
    this.value = ""; // also works, `this` is a magic variable
};

You can just keep typing JavaScript instead of assigning strings and relying on eval.

Upvotes: 1

Related Questions