javascript - 单击链接时突出​​显示输入内的文本

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

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

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

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

尝试这个：

$('#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 2

改为使用.select()。

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

jsFiddle 示例

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

非常感谢你们！