Set focus on input element after a link is clicked

Question

I have this clickable link,

`<a href="#" id="link">Clickable Link</a>`

and I have this <input> which will come out after the link is clicked,

    <input id="geo_title" type="text" value="some value" class="geo_title" />

in my script,

    $('#link').click(function(){

        $('input#geo_title').removeAttr('value');
        $("input#geo_title").focus();
    });

but sadly this does not focus the <input> element. What I wanted was that, after I click the link, I don't have to click the <input> element to be able to input something. What did I miss? Your help is highly appreciated. Thanks.

Answer 1

Works fine, you'll just have to prevent the default link action, so the browser won't try to follow it.

$('#link').click(function (evt){
  $('input#geo_title').removeAttr('value');
  $("input#geo_title").focus();
  evt.preventDefault();
});

Answer 2

try to remove the default focus from the link by adding href=#!

<a href="#!" id="link">Clickable Link</a>