jQuery trường nhập năng động lấy nét

Question

Tôi muốn thêm một trường nhập tự động vào trang của tôi bằng cách sử dụng jQuery như sau:

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

và sau khi làm như vậy, tôi muốn các lĩnh vực đầu vào có trọng tâm với con trỏ nhấp nháy văn bản, vì vậy Tôi muốn gõ vào nó ngay sau khi sáng tạo.

Có thể ai đó vui lòng cho tôi biết cách tôi có thể thực hiện việc này?

Tôi đã thử gọi

$(inputNode).focus()

và cũng đã cố gắng

$(inputNode).trigger('click')

nhưng không ai trong số họ làm việc. Tôi có thể nhập vào trường sau khi nhấp vào trường, nhưng như tôi đã nói tôi muốn nhập mà không có bất kỳ tương tác nào ngay lập tức.

Answer 1

Khi bạn đã cố gắng $(inputNode).focus(), jQuery đã được chỉ đơn giản là xây dựng một ngắt kết nối (từ DOM) <input> yếu tố mới đó là khác nhau đối với một trong những bạn đã nối - mặc dù một ngắt kết nối này được tập trung :-)

Có một vài cách tập trung đầu vào.

Nếu bạn có thể sử dụng HTML5 sau đó thêm thuộc tính autofocus sẽ tập trung đầu vào

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

Hoặc, sử dụng jQuery, bạn cần phải tìm ra <input>sau phần tử đã được tạo ra để gọi .focus() vào nó, như là inputNode trong mã của bạn chỉ đơn giản là một chuỗi và không phải là một đối tượng jQuery.

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

Answer 2

Bạn có thể chuyển đổi nó thành một đối tượng jQuery trước khi gắn nó vào dom, theo cách đó bạn có một tham chiếu đến nó. Sau đó, chỉ cần gọi .focus trên đối tượng được tham chiếu.

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

Đây là fiddle.

Answer 3

inputNode không phải là phần tử jQuery, nó là một chuỗi.

Bạn có thể có nghĩa là:

$('#inputNode').focus() 

như trái ngược với:

$(inputNode).focus() 

Trình duyệt sẽ không phàn nàn ở đây kể từ khi bạn đã có một biến với tên đó

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

hoạt động tốt cho tôi: http://jsfiddle.net/GqFap/9/

Answer 5

Bạn cần một cái gì đó như thế này:

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

Phương pháp tập trung là một phương pháp phần tử DOM không đối tượng jQuery do đó nhu cầu về một cuộc gọi đến 'get'.

Bạn có thể muốn đọc lên trên appendTo và get phương pháp trong các tài liệu jQuery

Hope this helps