highlight text inside input when 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" style="display:none" />

in my script,

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

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

NOTE: Actual code. I have already another event like this

$('#link').live('click',function(){
        $(this).hide();
        $('span.title').hide();
        $('#geo_title').removeAttr('style').removeClass('active_geo_title').css({'padding-top':'10px','padding-bottom':'10px','padding-right':'10px','width':'120%'});


        $("input#geo_title").select();

        return false;
    });

just a minor observation: if you have an element id, NEVER put anything in front - slows down selectors unnecessarily, since the ID already is unique. PS: I did not click "-1" on this question. — Mörre, Feb 08 '13 at 17:00
Did you make sure the text field is completely visible before you focus it? Try using setTimeout with a one second delay to debug. — DankMemes, Feb 08 '13 at 17:05

score 0 · Answer 1 · answered Feb 08 '13 at 17:06

0

Use .select() instead.

$('#link').click(function(){
    $("#geo_title").select();
});

jsFiddle example

answered Feb 08 '13 at 17:06

j08691

204,283
31
260
272

I am using select now but still it does not work. In addition to this dilemma, in my actual code, the input is hidden. It will show after the link is clicked. Is that a possible reason why it won't work? – Tsukimoto Mitsumasa Feb 08 '13 at 17:15
Yes. Can you post an actual example of what you're using? – j08691 Feb 08 '13 at 17:17
I see your edited code but where are you both hiding and showing the input? – j08691 Feb 08 '13 at 17:36
the input is hidden at first. originally it contains style=display:none. only then will it show after the link is clicked. – Tsukimoto Mitsumasa Feb 08 '13 at 17:38
So is the problem the input isn't showing after the click, or that it shows but doesn't highlight. I've tried to reproduce your situation based on your new code and it works provided I show the input prior to selecting it. – j08691 Feb 08 '13 at 17:42
The problem is that it really shows but it doesn't highlight. – Tsukimoto Mitsumasa Feb 08 '13 at 17:49
If you can reproduce the issue in a jsFiddle that would be helpful. – j08691 Feb 08 '13 at 17:50
OK, but you commented out the code that would perform the highlight (although you had the selector wrong as `".geo_title` instead of `"#geo_title`). Works when you uncomment it and fix the selector: http://jsfiddle.net/j08691/fVfCr/19/ – j08691 Feb 08 '13 at 18:03

Jehanzeb.Malik · Answer 2 · 2013-02-08T18:30:41.127

0

Try this:

$('#link').click(function() {
    $(this).hide();
    $('.title').hide();
    $("#geo_title").css({
        'padding-top': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'width': '120%',
        'display' : 'block'
    });
    $('#geo_title').select();
});

edited Feb 08 '13 at 18:30

answered Feb 08 '13 at 18:08

Jehanzeb.Malik

3,332
4
25
41

score 0 · Answer 3 · answered Feb 08 '13 at 19:24

I hope it was really hopeless but then someone gave me a tip using trigger. So I wrote this,

$('#geo_title).click(function(){ this.select(); });

and inside my another event which uses .live() I call the code above so that it will be triggered. So my final code for this is,

$('#link').live('click', function () {
$(this).hide();
$('span.title').hide();
$('#geo_title').removeAttr('style').removeClass('active_geo_title').css({
    'padding-top': '10px',
    'padding-bottom': '10px',
    'padding-right': '10px',
    'width': '120%'
});

$("#geo_title").click();

return false;
});

$('#geo_title').click(function(){
    this.select();
});

Thanks a lot guys!

Take a look at using .on() over the .live() function. .live() has some performance issues to consider. See this post for more info: http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on — Pat Burke, Feb 08 '13 at 19:28

highlight text inside input when link is clicked

3 Answers3