js实现通过文本框一行行录入textarea！ 130

如图所示效果选中一个日期同时也录入到了右边的textarea里另外还可以选中右边的日期进行删除！... 如图所示效果
选中一个日期
同时也录入到了右边的textarea里
另外还可以选中右边的日期进行删除！展开

 我来答

3个回答

#热议# 不吃早饭真的会得胆结石吗？

570851835
2013-09-24 · TA获得超过7892个赞

知道大有可为答主

回答量：2343

采纳率：0%

帮助的人：2304万

我也去答题访问个人页

关注

展开全部

<body>
<input type="text" id="date" style="position:relative; vertical-align:top;" /> <select multiple="multiple" id="textarea" style="position:relative; width:120px; height:150px; vertical-align:top; border:1px solid #cccccc;"></select>
<script>
var date=document.getElementById("date"),textarea=document.getElementById("textarea");
date.onkeypress=function(e){
var ev=e||window.event;
if(ev.keyCode==13)
{/*在输入框按回车就是录入数据*/
record(this.value);
}
}
textarea.ondblclick=function(e)
{/*双击数据即是删除*/
var index=this.selectedIndex;
if(confirm("确定要删除当前项？"))
{
remove(index);
}
}
function record(value)
{/*录入数据*/
if(!value)
{
return;
}
var option=document.createElement("option");
option.value=value,option.innerHTML=value;
textarea.appendChild(option);
}
function remove(index)
{/*删除选中项*/
textarea.remove(index);
}
</script>
</body>

已赞过 已踩过<

评论收起

广州市魔书科技有限公司

广告2024-12-28

ppt生成、文本润色、翻译、文档阅读、写文案、写代码、写论文等API直连，集成12家知名企业大语言模型

chat.moshuai.co

九万次路过
2013-09-20 · TA获得超过142个赞

知道答主

回答量：123

采纳率：0%

帮助的人：43.2万

我也去答题访问个人页

关注

展开全部

右边用多行选择框
<SELECT NAME="toppings" multiple="multiple" SIZE="5">

更多追问追答
追问

我想把左边的值传入到右边JS如何写！
在选中日期同时日期传入到右边！
追答

        function toTextarea(){
  		var left = document.getElementById("left").value;  //获取左边的值
			document.getElementById("textarea").value += (left+"\n");
  	}	
  	
  	function toSelect(){
  		var left = document.getElementById("left").value;  //获取左边的值
  		var newNode = document.createElement("option");
  		newNode.innerHTML = left;
  		document.getElementById("select").appendChild(newNode);
  	}
追问

左边那个是INPUT格式啊
能完整写一下吗
谢谢！
追答
左边是input 格式啊 你那个不也是input格式？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
 
  <script type="text/javascript">
  	function toTextarea(){
  		var left = document.getElementById("left").value;  //获取左边的值
			document.getElementById("textarea").value += (left+"\n");
  	}	
  	
  	function toSelect(){
  		var left = document.getElementById("left").value;  //获取左边的值
  		var newNode = document.createElement("option");
  		newNode.innerHTML = left;
  		document.getElementById("select").appendChild(newNode);
  	}
  </script>
</HEAD> 

<BODY> 
	<input id="left" /><br/>
	<input type="button" value="click me copy to textarea" onclick="toTextarea()"/>
	
	<textarea id="textarea"></textarea><br/>
	<input type="button" value="click me copy to select" onclick="toSelect()"/>
<SELECT id="select" multiple="multiple" SIZE="5"> 
	<option>123</option>
</SELECT> 
</BODY> 
</HTML>
追问

能加个删除功能吗！
追答
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
  <TITLE> TEST </TITLE> 
  <script type="text/javascript">
  	
  	function doDelete(){
  		var childs = document.getElementById("select").childNodes;
  		for(var i=childs.length-1;i>=0;i--){
  			alert(childs[i].selected);
  			if(childs[i].selected){
  				childs[i].remove();
  			}
  		}
  	}
  </script>
</HEAD>
<BODY>
	<input id="left" value="123"/><br/>
	<input type="button" value="click me! copy to textarea" onclick="toTextarea()"/>
	<textarea id="textarea"></textarea><br/>
	<input type="button" value="click me! copy to select" onclick="toSelect()"/>
	<input type="button" value="click me! delete selected" onclick="doDelete()"/>
<SELECT id="select" multiple="multiple" SIZE='6'></SELECT>
</BODY>
</HTML> select 可以加 textarea  直接键盘删除吧