Hola gente de Stackoverflow, espero que tengan un gran día. Estoy trabajando en un proyecto y tengo que usar los elementos tabs del framework Materializecss (un framework de material design). Básicamente quiero lograr el siguiente comportamiento en el elemento tab: el usuario debe poder editar el nombre del elemento tab haciendo doble clic en el nombre actual, debe poder editar el nombre cuantas veces quiera dando doble click en el nombre que ya posea.
En la siguiente imagen se muestra el elemento tab de materialize:
En esta imagen, pueden ver que hay dos tabs(tambien llamadas pestañas), bueno, quiero que al hacer doble clic, por ejemplo, en el nombre "NEWFILTER"(nombre de la primera pestaña) se desbloquee o aparezca automáticamente un cuadro de texto con el nombre actual "filtro nuevo" y la posibilidad de borrar ese texto e ingresar un nuevo nombre. Cuando el usuario termine, presione la tecla enter y automáticamente el nuevo nombre debe colocarse como el nombre de la pestaña actual. ¿¿¿Me entienden??? ¿Cómo puedo hacer eso con jquery o javascript? ¿Alguna idea? Aquí está el código del elemento tab de materializecss:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#test1">NEWFILTER</a></li>
<li class="tab col s3"><a href="#test2">New Tab</a></li>
</ul>
</div>
<div id="test1" class="col s12">BODY TAB 1</div>
<div id="test2" class="col s12">BODY TAB 2</div>
</div>