CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2433689
user2433689

Reputation:

Search box active when visiting website.

I have a search box that I would like to make active when the customer visits my web page.

My HTML is:

<form class="form-search top-search" action="Search.aspx" onsubmit="return validateSearch(this);" method="GET">
<input type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="Search and find it fast" title="Search and find it fast" onblur="if (this.value == '') { this.value = 'Search and find it fast'; }" onfocus="if ((this.value == 'Search and find it fast')||(this.value == 'Search and find it fast')) { this.value = ''; }" onkeypress="if ((this.value == 'Please enter a keyword or item #')||(this.value == 'Search and find it fast')) { this.value = ''; } else{ document.getElementsByName('ss')[0].style.color='black'; }" autocomplete="off">
<input type="submit" title="Search" class="btn btn-orange SearchButton" value="Search">
</form>

I'm just wanting to default the user into the field, like how Amazon defaults you into their search box.

Upvotes: 1

Views: 2528

Answers (4)

Kudlas
Kudlas

Reputation: 659

Pure Javascript solution, works IE6+ and any other browser.

Put this before body end tag

  <script type="text/javascript">
    var obj = document.getElementById("ss");
    obj.focus(); 
  </script>

On browsers, that support html5, you can use autofocus attribute inside input.

<input autofocus type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="Search and find it fast" title="Search and find it fast" autocomplete="off" />

Upvotes: 0

NiiL
NiiL

Reputation: 2827

You can use any of these options After Page Load. 

$('#ss').focus();

$('#ss').select();

$('#ss').trigger('focus');

$('#ss').trigger('click');

For Example:

$(document).ready(function(){
     $('#ss').trigger('click');
});

Upvotes: 0

chris
chris

Reputation: 4867

You can use the HTML5 autofocus attribute:

<input type="text" autofocus>

Upvotes: 3

Anton
Anton

Reputation: 32581

You can use .focus() to focus the input 

$(function () {
    $('#ss').focus();
});

DEMO

Upvotes: 2

Related Questions