dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Focus On Input After Clicking Anchor

  1. #1
    Join Date
    Nov 2009
    Posts
    9

    Focus On Input After Clicking Anchor

    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 http://www.mywebpromo.com 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!

  2. #2
    Join Date
    Feb 2014
    Posts
    3
    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.

  3. #3
    Join Date
    Nov 2009
    Posts
    9
    My site already uses MooTools. Wont jQuery cause conflicts?

  4. #4
    Join Date
    Nov 2009
    Posts
    9
    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...

  5. #5
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You can just use the HTML autofocus attribute.

    HTML Code:
    <!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>
    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.

  6. #6
    Join Date
    Nov 2009
    Posts
    9
    Quote Originally Posted by Error404 View Post
    You can just use the HTML autofocus attribute.

    HTML Code:
    <!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>
    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.
    What would I used in the "href" area of the anchor tag?

  7. #7
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by MatteoMWP View Post
    What would I used in the "href" area of the anchor tag?
    HTML Code:
    <!-- 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>
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles