单击链接时在输入中突出显示文本

Question

我有这个可点击的链接，

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

我有这个<input> ，它将在单击链接后出现，

<input id="geo_title" type="text" value="some value" class="geo_title" style="display:none" />

在我的剧本中

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

但是遗憾的是，这并没有关注该元素。 我想要的是，单击链接后， <input>的value属性将被突出显示，而不必单击该元素即可输入内容。 我错过了什么？ 非常感谢您的帮助。 谢谢。

注意：实际代码。 我已经有另一个这样的活动

$('#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;
    });

Answer 1

使用.select()代替。

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

jsFiddle示例

Answer 2

尝试这个：

$('#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();
});

Answer 3

我希望这真的没有希望，但是后来有人用扳机给了我一个小费。 所以我写了这个

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

在另一个使用.live()事件中，我调用了上面的代码，因此它将被触发。 所以我最终的代码是

$('#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();
});

非常感谢你们！