16

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

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

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

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

我试过打电话

$(inputNode).focus()

并且也尝试过

$(inputNode).trigger('click')

但他们都没有工作。单击后我可以在该字段中输入，但正如我所说，我想立即输入而无需任何交互。

4

5 回答 5

15

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

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

如果您可以使用 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();
于 2012-10-25T13:03:27.940 回答
4

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

你可能的意思是：

$('#inputNode').focus()

相对于：

$(inputNode).focus()

浏览器不会对此抱怨，因为您有一个具有该名称的变量

于 2012-10-25T13:03:37.570 回答
4

你需要这样的东西：

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

focus 方法是 DOM 元素的方法，而不是jQuery 对象，因此需要调用“get”。

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

希望这可以帮助

于 2012-10-25T13:10:49.640 回答
3 
<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/

于 2012-10-25T13:10:04.797 回答
2

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

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

这是一个小提琴。

于 2012-10-25T13:03:25.797 回答