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

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 example

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

非常感谢大家！