Question

我想使用以下jQuery动态地向我的页面添加输入字段：

var inputNode = "<input id='inputNode' class='tiContent' type='text'
    placeholder='text input...'/>";
$("div").append(inputNode);

并且在这样做之后，我希望输入字段具有闪烁文本光标的焦点，所以我想在创建后立即键入它。

有人可以告诉我该怎么做？

我试过调用

$(inputNode).focus()

也尝试了

$(inputNode).trigger('click')

但它们都没有奏效。点击后我可以输入字段，但正如我所说，我想立即键入而不进行任何交互。

Answer 1

当你尝试$(inputNode).focus()时，jQuery只是构建了一个新的断开连接（来自DOM）<input>元素，这个元素与你附加的元素不同 - 尽管这个断开连接的元素是关注的： - ）< / p>

有几种方法可以集中输入。

如果您可以使用HTML5，则添加autofocus属性将重点关注输入

var inputNode = '<input autofocus id="inputNode" class="tiContent" type="text" placeholder="text input..."/>';
$('div').append(inputNode);

或者，使用jQuery，您需要在创建元素之后找到<input> ，以便在其上调用.focus()，作为您的inputNode代码只是一个字符串而不是jQuery对象。

var inputNode = '<input id="inputNode" class="tiContent" type="text" placeholder="text input..."/>'; $('div').append(inputNode); $('div input').focus(); // or $('#inputNode').focus();

Answer 2

inputNode不是jQuery元素，它是一个字符串。

你可能意味着：

$('#inputNode').focus()

而不是：

$(inputNode).focus()

由于您拥有一个具有该名称的变量

，因此浏览器不会抱怨

Answer 3

你需要这样的东西：

 $('<input />').appendTo('div').get(0).focus();

焦点方法是DOM元素不 jQuery对象的方法，因此需要调用'get'。

您可能希望阅读jQuery文档中的appendTo和get方法

希望这有帮助

Answer 4

<input type="button" value="click me" id="btnCreateTxt" />
<div></div>

$(document).ready(function() {
    $('#btnCreateTxt').click(function() {        
        var inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>");
        $("div").append(inputNode);
        inputNode.focus();    
    });
});

对我有用：http://jsfiddle.net/GqFap/9/

Answer 5

你可以在将它附加到dom之前将其转换为jQuery对象，这样你就可以引用它了。然后只需在引用的对象上调用.focus。

var $inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>");
$('body').append($inputNode);
$inputNode.focus();

这是一个fiddle。

jQuery动态输入字段焦点

5 个答案: