Основные шаги
- Поместите текстовое поле в div и сделайте так, чтобы оно тоже скрывало.
- Сделайте div похожим на текстовое поле.
- В обработчике div элемента onClick установите фокус ввода на скрытое текстовое поле.
- Обработка события onKeyUp скрытого текстового поля для захвата текста, форматирования по мере необходимости и изменения innerHtml элемента div.
Это довольно просто. Я оставлю вас, чтобы написать ваш форматтер, но в основном вы просто разделите String на разделитель в соответствии с Semi-Working-Example.
Простой контур
<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 контекстного меню. Но с тегами и идентификаторами пробелов, указанными в приведенном ниже коде, это должно быть довольно просто:
<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.