내 사이트에서 사람들이 구분 문자로 구분 된 문자열 집합을 입력 할 수있는 텍스트 상자를 구현하고 싶습니다.
예를 들어이 페이지 하단의 태그 텍스트 상자는 태그 (문자열)를 공백으로 구분 한 것입니다 (구분 기호).
사용자가 더 명확하게 이해하려면 각 문자열에 다른 배경색이나 다른 시각적 힌트를 제공하는 것이 좋습니다.
정규 입력 [텍스트] 컨트롤에서는 이것이 가능하지 않다고 생각합니다.여러 가지 색의 텍스트 상자에 대한 아이디어?
자바 스크립트로 그와 비슷한 것을 만들 수 있다고 생각하십니까? 누가 나 전에 벌써 했니? 다른 제안이 있으십니까?
기본 단계
아주 간단합니다. 나는 당신에게 포맷터를 쓰도록 맡길 것이지만 기본적으로 세미 - 실례 (Semi-Working-Example)에 따라 splitString을 구분 기호로 사용합니다.
간단한 개요
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
세미 작동 예
당신은 여전히 태그 삭제/편집/백 스페이스/등을 통해 키보드를 설명하기 위해 클릭 핸들러를 확장 할 필요가 .... 또는 클릭 이벤트를 사용하여 다른 컨텍스트 메뉴 div를 팝업 할 수 있습니다. 그러나 아래의 코드에서 확인 된 태그와 스페이서 ID가 매우 용이해야한다 :
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
커서
당신은 (지원 확인)하거나 단지 발전하고 필요에 따라 숨길 점멸을 사용하여 커서를 CSS 수 애니메이션 GIF.
텍스트 영역에 이러한 기능을 추가하는 TinyMCE와 같은 스크립트에서 어떻게 표시되는지 확인할 수 있습니다. 텍스트 영역에서는 HTML을 사용하여 텍스트를 색칠 할 수 있습니다.
필자는 편집자가 내가 원하는 것을 생각하지 않지만, 실제로 어떻게 그랬는지 확인할 수 있습니다. –
더 명확해야합니다. 그게 내가 의미했던 것. – Ikke
예, 제가 추론했습니다. :) 실제로 엿보는 것이 좋습니다. –
여러 텍스트 상자
textbox1 <space> textbox2 <space> textbox3 ....
내가 하나의 텍스트 상자처럼 보이게 만들 수 있지 않으면 인터페이스가 혼란스럽고 다른 방법으로 혼란스럽게 만들 것이라고 생각합니다. 그러나 나는 그 길을 너무 생각하고있다. –
이것은 매우 흥미 롭습니다. 귀하의 질문에 대한 짧은 대답은 '아니오'입니다. 기본 입력 요소가 아닙니다.
실제 답변은 다음과 같습니다. 아마도 자바 스크립트를 사용하여 일부 속임수를 쓰는 것일 수 있습니다.
페이스 북은 분명히 이와 비슷한 것을합니다. Facebook에있는 여러 사람에게 새 메시지를 쓸 때 이러한 이름을 입력 할 수 있습니다. 각각의 인식 된 새 이름은 여기에 태그와 같이 약간 추가되고 그것을 제거하기 위해 옆에 작은 십자가가 있습니다.
그들이하는 것처럼 보이지만 입력 모양의 상자를 그리고 css를 사용하여 실제 입력에서 모든 스타일을 제거하여 입력 영역 크기를 가짜로 만듭니다. 그런 다음 그들은 자바 스크립트로 할 수있는 많은 논리를 가지고있어서 친구를 태그로 추가하고 백 스페이스를 시작하면 즉시 전체 친구 이름을 제거합니다.
네, 그렇습니다.하지만 많은 노력과 접근성 문제가 추가됩니다.
네, 많은 일이있을 것 같아서 비밀리에 어딘가에 이미 정해져 있기를 바랬습니다.)하지만 실제로 많은 사이트에 많은 가치를 부여 할만한 가치가 있다고 생각합니다. –
예, 그럴 수 있습니다 :) –