Блог

Главная - Вопросы по программированию - помощь в фокусировке динамически создаваемых входных данных

помощь в фокусировке динамически создаваемых входных данных

#jquery

#jquery

Вопрос:

мой код таков. на jsfiddle.

 var inp = $('<input>').attr({'class':'txtEdit txt', 
    'type':'text'})
    .val($(this).html()).blur(function (){
        if($(this).val().length != ''){
            $(txt).replaceWith($(editable)
                .html($(this).val()));
        }
        else{ alert("Cannot contain empty value!")}
    }).keydown(function (e){
            if(e.keyCode == 13 || e.keyCode == 9){
                e.preventDefault();
                $(this).trigger('blur');
            }
    }).appendTo($(txt));

Я создаю элемент ввода с большим количеством событий и добавляю в div. Теперь я хочу сфокусировать его так, как он добавляется к DOM. но фокус, похоже, не работает.

Вот общий код.

 <html>
    <head>
        <title>My jQuery plugin</title>
        <script src="jquery.js"></script>
        <script>
            $(function ()
            {
                    $('.editable').txtEdit();
            });

            (function($){
                $.fn.txtEdit = function() {
                    var editable = $(this);

                    $(editable).live('click', 
                        function ()
                        {
                            var txt = $('<div>').attr('class', 'txtEdit div');
                            var inp = $('<input>').attr({'class':'txtEdit txt', 
                                            'type':'text'})
                                        .val($(this).html()).blur(function (){
                                                if($(this).val().length != ''){
                                                    $(txt).replaceWith($(editable)
                                                        .html($(this).val()));
                                                }
                                                else{ alert("Cannot contain empty value!")}
                                            }).keydown(function (e){
                                                    if(e.keyCode == 13 || e.keyCode == 9){
                                                        e.preventDefault();
                                                        $(this).trigger('blur');
                                                    }
                                            }).appendTo($(txt));
                            $(this).replaceWith(txt);                           
                        }
                    );
                };
            })(jQuery);
        </script>
    </head>
    <body>
        <div class="editable">this is editable div</div>
    </body>
</html>

У кого-нибудь есть идеи??

С уважением,

Ответ №1:

Добавить

 inp.focus();

после

 $(this).replaceWith(txt);

Потому что ваш div создается после действия фокусировки, что неправильно.
Вы должны отобразить div, а затем сосредоточиться на вводе.

Ответ №2:

Вместо того, чтобы привязывать фокус, добавьте это после создания поля ввода.

 inp.focus();

Ответ №3:

Просто сделайте 

 inp.focus();

после $(this).replaceWith(txt);

То, что вы делали, это пытались сфокусировать элемент перед добавлением его в DOM (пока он все еще был в памяти).

жить на http://jsfiddle.net/gaby/KH7pZ/8 /

Ответ №4:

Вам нужно поместить 

 inp.focus();

В конце вашего кода (после завершения замены);

Вот ваша обновленная скрипка: http://jsfiddle.net/KH7pZ/9 /