jQuery UI Tabs - On DoubleClick Rename this Tab

Question

I am using jQuery UI Tabs...

Double click on tab name text to rename

Eg: On Double Click of " Home 1 " Tab, editable text field should be visible with the label inside says( this tab name ) " Home 1 " and can be changed to other name ie " Custom Tab ". As soon as I hit Enter button, this tab name should be changed to " Custom Tab "....

---

FIDDLE

---

HTML

<div id="my-tabs">
    <ul>
        <li><a href="#Home-1">Home 1</a></li>
        <li><a href="#Home-2">Home 2</a></li>
        <li><a href="#Home-3">Home 3</a></li>
    </ul>
    <div id="Home-1">
        <p>Home Content 1</p>
    </div>
    <div id="Home-2">
        <p>Home Content 2</p>
    </div>
    <div id="Home-3">
        <p>Home Content 3</p>
    </div>
</div>

jQuery

$(function() {
    var tabs = $( "#my-tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs( "refresh" );
        }
    });
});

This is what I am talking about

Answer 1

Ok Here is a workaround!!

DEMO

HTML

 <li class="tab"><input class="txt" type="text"/><a href="#Home-1">Home 1</a></li>
 <li class="tab"><input class="txt" type="text"/><a href="#Home-2">Home 2</a></li>
 <li class="tab"><input class="txt" type="text"/><a href="#Home-3">Home 3</a></li>

CSS

input[type=text]
{
    display:none;
    width:120px;
}
a
{
    display:block;
}

JS

$('.tab').on('dblclick',function(){
    $(this).find('input').toggle().val($(this).find('a').html()).focus();
    $(this).find('a').toggle();
});

$('.tab').on('blur','input',function(){
    $(this).toggle();
    $(this).siblings('a').toggle().html($(this).val());
});

UPDATE

DEMO HERE

Works for enter keypress , blur and arrowkeys wherein arrowkeys when pressed during edit mode, used to force textbox to loose focus!! below is the total fix:

$('.tab').on('keydown blur','input',function(e){
       if(e.type=="keydown")
       {
           if(e.which==13)
           {
               $(this).toggle();
               $(this).siblings('a').toggle().html($(this).val());
           }
           if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
           {
               e.stopPropagation();
           }
       }
       else
       {
            if($(this).css('display')=="inline-block")
            {
                $(this).toggle();
                $(this).siblings('a').toggle().html($(this).val());
            }
       }
});

UPDATE 2

You need to check for dblclick event along with blur and keydown for the input as below:

DEMO

$('.tab').on('keydown blur dblclick','input',function(e){
     if(e.type=="keydown")
     {
         if(e.which==13)
         {
            $(this).toggle();
            $(this).siblings('a').toggle().html($(this).val());
         }
         if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
         {
            e.stopPropagation();
         }
     }
     else if(e.type=="focusout")
     {
         if($(this).css('display')=="inline-block")
         {
             $(this).toggle();
             $(this).siblings('a').toggle().html($(this).val());
         }
     }
     else
     {
         e.stopPropagation();
     }
});

Answer 2

http://jsfiddle.net/ckpwdojt/5/

Here is the way. Enter key doesn't work in jsfiddle for some reason. So temporarily put it to Q.

    $("a").dblclick(function() {
        $(this).hide();
        $(this).next().show();
    });
    $('.hide').keypress(function(e){
        if(e.keyCode==113) { //for some reason enter doesn't work. keyCode ==13
            var input = $(this); 
            input.hide();
            $(this).prev().show().text(input.val());
        }    
    });