텍스트를 단추로 변환하는 입력 상자

Question

입력 텍스트를 "단추"onblur로 변환하는 텍스트 입력 필드를 만들려고합니다. 예를 들어 핫메일 "새 이메일 페이지"에서 전자 메일 주소를 입력하면 구분 기호 (세미콜론 또는 쉼표)를 입력 할 때 삭제 단추가있는 작은 단추 모양의 개체가됩니다. 누구든지이 작업을 수행하는 방법을 알고 있습니까?

테두리가있는 div가있는 곳에서 일종의 해결 방법을 사용했습니다. div에는 보어가 보이지 않는 입력 필드와 숨겨진 버튼이 있습니다. 나는 입력 값을 가져 와서 버튼을 값으로 볼 수있게 해주는 js 함수를 가지고있다. 그러나 이것은 정확히 무엇을 찾고있는 것이 아니다.

실제로 나는 포스트에 태그를 추가 할 때 stackoverflow를 실제로 실현한다.

Answer 1

이 다중 값 필드입니다. this one을보십시오.

이 기능은 그리 복잡하지 않습니다. HTML 목록이며, 선택한 각 값은 LI 노드로 변환되어 해당 목록에 추가됩니다. 입력 필드는 마지막 LI 내부에 있으므로 커서는 항상 마지막 선택 뒤에 올 수 있습니다. 게다가 입력 값은 입력에 할당되며 서버 측에서는 쉼표로 구분 된 값으로 사용할 수 있습니다.

Answer 2

는 여기 가짜 간단한 방법 (그리고 이것이 SO 태그 무엇과 유사 모양) :

1. 텍스트 <input>를 만들고, 그 경계와 윤곽이 모두 없음으로 설정되어 있는지 확인 .
2. 태그 (또는 버튼 등)의 컨테이너를 만들고 <input> 옆에 넣으십시오.
3. <input>에있는 keydown 이벤트를 모니터링하십시오. 사용자가 "구분"문자 (예 : 세미콜론 또는 쉼표)를 입력하려고하면 버튼을 만들고 컨테이너에 추가하고 <input>의 값을 비우고 기본값을 방지합니다 ("중단"문자 태그에 삽입되지 않았거나 <input>에 남아 있음).

기본 아이디어입니다. 당신이 그 일을하면, 당신은 버튼에 이벤트 리스너/처리기를 추가하거나, 등 당신이 원하는 어떤 그 어떤,

Here's the simple example I cooked up 스타일을 할 수 있습니다

var inp = document.getElementById('yourInput'), 
    tags = document.getElementById('yourContainer'), 
    breaks = { 
     186: 1, // semi-colon 
     188: 1 // comma 
    }; 

function createTag(txt) { 
    var elem = document.createElement('span'); 
    txt = document.createTextNode(txt); 
    elem.appendChild(txt); 
    elem.className = 'tag'; 
    tags.appendChild(elem); 
} 

function monitorText(e) { 
    e = e || window.event; 
    e = e.keyCode; 
    if (breaks[e]) { 
     e = inp.value; 
     inp.value = ''; 
     createTag(e); 
     return false; 
    } 
} 

inp.focus(); 
inp.onkeydown = monitorText;