어떻게 Materializecss에서 탭의 이름을 편집 할 수 있습니까?

Question

안녕하세요 stackoverflow 사람들이, 당신이 좋은 하루 보내고 있기를 바랍니다. 저는 프로젝트에서 일하고 있는데 Materializecss 프레임 워크의 요소 탭을 사용해야합니다. 기본적으로 나는 다음과 같은 동작을 원합니다 : 사용자는 현재 이름을 클릭하여 doble을 수행하는 탭의 이름을 편집 할 수 있어야합니다. 이 이미지는 tabs 요소를 보여줍니다 : MATERIALIZE TAB 이 이미지에서 두 개의 탭이 있는지 확인합니다. 글쎄, "NEWFILTER"라는 이름을 두 번 클릭하면 자동으로 "newfilter"라는 현재 이름의 텍스트 상자가 나타납니다. 그 텍스트를 지우고 새로운 이름을 입력 할 수있는 가능성. 사용자가 Enter 키를 누르면 자동으로 새 이름이 현재 탭의 이름으로 지정됩니다. 너 이해해? 어떻게해야합니까? 어떤 생각?

.tabs { 
 
border: 1px solid grey; 
 
}

<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>

Answer 1

더블 클릭 요구 사항이 가지 성가신 수 : 여기 materializecss 탭의 코드입니다. 한 번의 클릭으로 괜찮 으면 탭 유형을 contenteditable으로 설정할 수 있습니다.

그렇지 않으면이 될 수 이러한 작업을 수행하기위한 하나 개의 일반적인 전략 :

1. 는 탭과 같은 이름, 탭의 이름 위에 중첩되는 contenteditable text 필드를 만듭니다. 기본적으로 표시를 없음으로 설정하십시오.

2. 탭에 onclick 수신기를 연결하십시오. 탭을 클릭 할 때마다 제한 시간을 설정하십시오. 사용자가 지정된 기간 내에 다시 클릭하면 더블 클릭이 발생합니다.

3. 더블 클릭이 발생한 경우 : 해당 탭과 관련된 내용 입력 가능 텍스트 필드를 표시하십시오.

4. 그런 다음 탭을 편집 할 수 있습니다. 키 누르기 이벤트 리스너를 contenteditable 텍스트 필드에 연결하여 사용자가 "enter"했는지 확인하십시오.

5. 사용자가 Enter 키를 누르면 편집 가능한 텍스트 필드의 innerHTML을 가져 와서 태그의 제목을 업데이트하고 편집 가능한 텍스트 필드를 숨 깁니다.