效果可以到这个地方去看
http://hi.csdn.net/space-14047-do-album-picid-781258.html
大家注意看哪个Tags输入框，其效果是：在那个看起来像个input的输入框中输入任何内容，按一下空格，就会自动变成后面有个小叉的效果，点击那个小叉，这个内容就被删除大家有谁知道怎么做的吗？给指点一下。谢谢啦。想去实际操作的话去这个地址
http://www.delicious.com/
可以用gmail，facebook或者雅虎的账户登录。登录以后点击上面的“ Tags”就可以看到效果。
http://hi.csdn.net/space-14047-do-album-picid-781258.html
大家注意看哪个Tags输入框，其效果是：在那个看起来像个input的输入框中输入任何内容，按一下空格，就会自动变成后面有个小叉的效果，点击那个小叉，这个内容就被删除大家有谁知道怎么做的吗？给指点一下。谢谢啦。想去实际操作的话去这个地址
http://www.delicious.com/
可以用gmail，facebook或者雅虎的账户登录。登录以后点击上面的“ Tags”就可以看到效果。
文本框输入后，键盘事件（空格，回车） 动态创建一个div,显示输入信息到前面，同时清空文本框！
当然，已经确定输入的值，可以保存到内存（一个全局变量 最好是数组）还在设置到文本框的一个属性。
前面删除，就完全是dom 操作，removeChild 就可以了。同时删除在内存保存的对应值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js 文本框效果</title>
<style type="text/css">
.inputs{width:600px;height:25px; border:1px solid #ddd;margin:100px auto;}
.divInputs{width:auto;heigth:23px;float:left;display:inline;}
.divInputs div{width:auto;heigth:23px;float:left;display:inline; margin:0px 2px; border:1px solid #333; }
</style>
</head>
<body><div class="inputs" id='inputs'>
<div class="divInputs" id='divInputs'></div>
<input type='text' value="" style="float:left; border:none; " id='txtInput'/></div>
<input type=button value="查看设置的值" id="btn"/>
</body>
<script type="text/javascript">window.onload=function()
{
var inputs=[];
var txtInput = document.getElementById("txtInput");
var divInputs = document.getElementById("divInputs");
document.getElementById("btn").onclick=function(){
alert(inputs);
} ;
document.getElementById("inputs").onclick=function(){
txtInput.focus();
} ;
txtInput.onkeydown=function(e)
{
e=e||event;
if(e.keyCode==13){ // 回车
var input = txtInput.value.trim();
if(input==""){
return;
}
var div = document.createElement("div");
div.innerHTML = input;
var span = document.createElement("span");
span.style.cssText ="top:0px;right:0px;position:relative;z-index:99999;font-size:10px; border:1px solid red;";
span.innerHTML="x";
div.appendChild(span);
divInputs.appendChild(div);
inputs.push(input);
txtInput.value ="";
span.onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
inputs.remove(input);
};
}
};
};
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
};
Array.prototype.indexOf=function(value){
if(this!=null && this.length>0){
for(var i=0;i<this.length;i++)
{
if(this[i]==value){ return i;}
}
}
return -1;
};
Array.prototype.removeAt=function(index){
this.splice(index,1);
}
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if (index>=0){
this.removeAt(index);
}
}
</script>
</html>
{
e=e||event;
if(e.keyCode==13){ // 回车
var input = txtInput.value.trim();
if(input==""){
return;
}
if(inputs.indexOf(input)>-1){
alert("内容已存在");
return;
} // 添加一个判断就更好了
var div = document.createElement("div");
div.innerHTML = input;
var span = document.createElement("span");
span.style.cssText ="top:0px;right:0px;position:relative;z-index:99999;font-size:10px; border:1px solid red;";
span.innerHTML="x";
div.appendChild(span);
divInputs.appendChild(div);
inputs.push(input);
txtInput.value ="";
span.onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
inputs.remove(input);
};
}
};