/    Sign up×
Community /Pin to ProfileBookmark

Focus On Input After Clicking Anchor

Copy linkTweet thisAlerts:
Feb 25.2014

Okay so I have been trying to figure this out for two days. I have Googled everything I could think of. Basically I have a link (anchor tag) that when clicked opens a javascript popup (like highslide) and within the popup it loads an inline html element which basically contains a search box. So what I need to do is when someone clicks the link and the popup with the search box in it opens, I need the focus to be on the search textbox so that the user can begin typing immediately into the box without having to click into the textbox.

If you want to see for yourself what I have you can login at [url]http://www.mywebpromo.com[/url] with Username: Test and Password: test1234

Once logged in you will see in the top right under the main navigation there are two links “Members” and “Search”. When you click search you will see the popup that contains the search box. I want to focus to be on the textbox so that the user can start typing after they click the search link.

Thank you!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@LoqKittyFeb 25.2014 — Sure, this is very easy to do with Javascript and jQuery.

First of all you need to add jQuery to your page. http://jquery.com/download/

Secondly, use $("selector").focus();

example:

$("#search").click(function(){

$("#searchbox").focus();

});

You will need to substitute the element IDs for what you have on your page.
Copy linkTweet thisAlerts:
@MatteoMWPauthorFeb 26.2014 — My site already uses MooTools. Wont jQuery cause conflicts?
Copy linkTweet thisAlerts:
@MatteoMWPauthorMar 02.2014 — Any suggestions please? I've been trying to figure this out on my own for quite a while and I'm just stuck. Not very good at JavaScript...
Copy linkTweet thisAlerts:
@Error404Mar 02.2014 — You can just use the HTML autofocus attribute.

[code=html]
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id = "inputBox">
<form action = "something" method = "post">
<label for = "searcher">Click here to get into the box
<input id = "searcher" type = "text" name = "searchBox" placeholder = "Search something" autofocus />
</label>
<br />
<input type = "submit" value = "Search!" />
</form>
</div>
</body>
</html>
[/code]

Depending on the browser, the placeholder text will still remain visible but the cursor will be in the box, such as for Chrome. Other browsers, such as IE 10 will place the cursor in the box but the placeholder text won't be visible. In either case, you can begin typing right away.
Copy linkTweet thisAlerts:
@MatteoMWPauthorMar 03.2014 — You can just use the HTML autofocus attribute.

[code=html]
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id = "inputBox">
<form action = "something" method = "post">
<label for = "searcher">Click here to get into the box
<input id = "searcher" type = "text" name = "searchBox" placeholder = "Search something" autofocus />
</label>
<br />
<input type = "submit" value = "Search!" />
</form>
</div>
</body>
</html>
[/code]

Depending on the browser, the placeholder text will still remain visible but the cursor will be in the box, such as for Chrome. Other browsers, such as IE 10 will place the cursor in the box but the placeholder text won't be visible. In either case, you can begin typing right away.[/QUOTE]

What would I used in the "href" area of the anchor tag?
Copy linkTweet thisAlerts:
@Error404Mar 03.2014 — What would I used in the "href" area of the anchor tag?[/QUOTE]

[code=html]
<!-- somewhere in the body -->
<a href = "thepopup" rel = "external">Click to open the pop up</a>

<script type = "text/javascript">
$('a[rel = "external]').attr('target', '_blank');
</script>
[/code]

The href would contain the path to your pop-up file. rel = external and the bit of jQuery is the modern equivalent to specifying target = _blank in your anchor tag, which tells your browser to open a new window. In my previous post, I assumed that if your pop-up was taking user input, then you'd want a form to process it but if you're not, then just get rid of the <form> and <input type = "submit" ... /> elements.
×

Success!

Help @MatteoMWP spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...