多彩多姿的文本框的想法？ [英] Ideas for multicolored textbox?
问题描述
在我的网站中，我想实现一个文本框，用户可以输入一组由分隔符分隔的字符串。
例如，此页底部的标签文本框：标签（字符串）由空格（分隔符）分隔。
为了让用户更清楚，为每个字符串提供不同的背景颜色或其他视觉提示会很有帮助。
我不认为这是可能的与一个常规的输入[文本]控制。
你认为有可能用javascript创建类似的东西吗？有人在我面前做过这件事吗？您还有其他建议吗？
基本步骤
- 将文本框放在div中，并将其设置为隐藏它的样式。
- 使div看起来像文本框。
- 在div的onClick处理程序中，将输入焦点设置为隐藏文本框。
- 处理隐藏文本框的onKeyUp事件以捕获文本，格式根据需要并改变div的innerHtml。
这很简单。我会留给你编写你的格式化程序，但基本上你只需按照Semi-Working-Example将分割字符串分隔。
简单轮廓
< html>
< head>
< script language =javascripttype =text / javascript>
function focusHiddenInput（）
{
var txt = document.getElementById（txtHidden）;
txt.focus（）;
函数formatInputAndDumpToDiv（）
{
alert（'由您决定如何格式化）;
}
< / script>
< / head>
< body>
< div onclick =focusHiddenInput（）;>
这里有一些标签，后面跟着一个divive文本框：
< input id =txtHiddenstyle =width：0px; onKeyPress =formatInputAndDumpToDiv（）type =text>
< / div>
< / body>
< / html>
半工实例
您仍然需要扩展点击处理程序来解释通过键盘标记删除/编辑/退格/等...或者您可以使用单击事件来弹出另一个上下文菜单div。但是在下面的代码中标识标签和spacer id应该很简单：
< html>
< head>
< script language =javascripttype =text / javascript>
var myTags = null;
函数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）;
}
函数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]）; $（b）b
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（'您点击了标签：'+ tag.title）;
}
函数spaceClickedHandler（spacer）
{
alert（'您点击了一个空格'）;
}
window.onload = init;
< / script>
< / head>
< body>
< div id =txtBoxDivContainer>
在下面输入标签（点击和输入）：< div id =txtBoxDivstyle =border：solid 1px #cccccc; height：20px; width：400px;的onclick = focusHiddenInput（）; >< / DIV>
< input id =txtHiddenstyle =width：0px;类型= 文本 >
< / div>
< / body>
< / html>
光标
你可以使用闪烁（检查支持）CSS或其他方式提前并隐藏必要的动画gif。
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
- Put a textbox in a div and style it too hide it.
- Make the div look like a text box.
- In the onClick handler of the div, set the input focus to the hidden text box.
- Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<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>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<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>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
这篇关于多彩多姿的文本框的想法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
