텍스트 입력 배열을 동적으로 늘리기 (HTML/JavaScript)

Question

일부 사내 자료에 대한 데이터 입력 앱을 만들고 있습니다.

저희 팀에서는 "카테고리"가 많은 "항목"에 대한 정보를 입력해야하며 그 반대도 마찬가지입니다.

나는 임의의 양의 카테고리를 입력 할 수있는 빠른 방법이 필요합니다. 여기

내 생각 : 처음에 "범주"에 대한 하나 개의 텍스트 입력있다 그래서 나는 그것을해야합니다 항목 항목 페이지에서

그리고 그것은 비어있는 동안 밖으로 탭 않다면, 입력 필드가 삭제됩니다 (그것이 유일한 것이 아닌 한) 초점은 다음 필드로 건너 뜁니다. 배열의 마지막 입력 필드 인 경우 이 아니며 및의 탭이있는 경우이 비어 있으면 추가 "카테고리"텍스트 입력이 추가되고 집중됩니다.

사람들은 키보드로 손을 떼지 않고도 탭을 타이핑하고 치면 바로 임의의 양의 카테고리를 빠르게 입력 할 수 있습니다. 그런 다음 탭을 두 번 눌러 목록의 끝을 나타냅니다.

우선이 인터페이스에 대해 어떻게 생각하십니까? 그것을 할 수있는 더 좋은 방법이 있습니까?

두 번째로 jQuery (또는 뭔가) 플러그인이 있습니까? 검색했지만 찾지 못했습니다. 나는 행운과 함께 scriptaculous/prototype과 mootools도 검색했다.

필자가 직접 시도한 것보다 오히려 시도하고 테스트 한 것을 사용하게 될 것입니다.

는 일체의 조언은 심지어 바닐라 JS 함께, 그것을 구현하기 위해 실제로 너무 어렵지 않다

Answer 1

감사 (예 : 어떤 jQuery를, 프로토 타입, 등),하지만 모든가 jQuery로 쉽게, 그래서 나는거야 여기

<form id="myForm"> 
    <div class="inputRow"> 
     <input type="text" name="myInput[]" /> 
    </div> 
    <div class="inputRow"> 
     <input type="text" name="myInput[]" /> 
    </div> 
    ... 
</form> 

JS

것 :

이 같은 구조를 가정하면 것을 사용하여에 이동이 의견에

---

응답 : 답변

감사합니다! 나는 그것을 시도했지만 의도 한대로 작동하지 않는 것 같습니다. 나는 맥 파이어 폭스에있어. 마지막 필드에서 탭을 떼면 새 필드가 추가되지만 주소 표시 줄은 포커스가 맞춰집니다. 나는 추가 시도 : insertAfter 라인 뒤에 $copy.find(":text").focus();하지만 아무것도 변경되지 않습니다. 어떤 아이디어?

내가 shift-tab이라면 블러 핸들러는 내가 반대 방향으로 가고 있다는 것을 모릅니다. 그 주위에 어떤 방법이 있습니까?

흠, 나는 그것에 대해 생각하지 않았습니다. 시도 할 수있는 것은 포커스를 가질 수있는 모든 텍스트 필드 뒤에 요소를 넣는 것입니다 (예 : margin-left: -10000px). 그 위에 onfocus 핸들러를 추가하여 마지막 행이 비어 있는지 확인하십시오. 그렇다면 onBlurHandler 함수에 의해 추가 된 것이므로 포커스를 마지막 행에 다시 전달하십시오.마지막 행이 비어 있지 않으면 다음 요소로 포커스를 전달합니다 (제출 버튼, 아마도). 아직 DOM에없는 마지막 행에 문제가있는 경우 위의 내용을 시간 초과로 설정하십시오.

(실제로 작동하는 경우) 사용자 탭에서 번거롭지 않고 앞뒤로 이동할 수 있습니다.

Answer 2

먼저 nickf 솔루션에 대한 문제를 해결하려고 노력할 것입니다.

새로 만든 입력 $copy.find(":text").focus();에 포커스를 설정하면 작동하지 않습니다. jQuery 포커스 메서드는 이벤트 만 트리거하지만 기본 포커스 메서드는 호출하지 않습니다.

당신은 setTimeout(function(){$copy.find(":text").get(0).focus()}, 10);에 포커스를 설정할 수 있지만 :

• 에서는 setTimeout은 커서가 깜빡 일이 일어날 파이어 폭스 또는 이상한 일들이 필요합니다.

• IE7은 탭 할 때 다른 입력이 필요합니다. 포커스가 주소 표시 줄에있는 경우 입력에 포커스를 설정하는 방법을 찾지 못했습니다. 적어도 제출 버튼이 필요하기 때문에 문제가되지 않는다고 생각합니다.

는 포커스 요소가 이전 입력되면 나는 blurHandler을 생략하기 위해, 포커스 요소를 추적하기 위해 노력했지만, 내가 게시합니다 결과 코드는 정말 못생긴 전환 탭을 제어하려면 이것과 더 나은 해결책을 찾으십시오.

그리고 마지막으로, 당신은 우리가이 UI의 생각을 요구하고, 나는 :-). 카테고리의 쉼표로 구분 된 목록을 사용자가 입력하는 코딩하기 쉽다는 것을 답변