Javascript教程_如何给input连续赋值_Javascript教程_H5之家

Javascript_如何给input连续赋值

教程网3月21日整理

学生：

在写一个选择热门标签的JS,就是为一个文档框连续赋值,但遇到一个麻烦的问题,我每次只能赋一个值,水平有限,摸索了半天未果,请高手们给我个解决方法.感谢.
实例说明:
想实现的效果是: 点击选择标签后面的值后,值会自动加到id为demo的文本域中,且可连续选择多个标签.
代码如下:
<input type="text" id="demo" size="30" />
<br>
选择标签: <a href="javascript:void(0)" onclick="checktag">标签一</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag">标签二</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag">标签三</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag">标签一</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag">标签四</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag">标签五</a>

Javascript视频教程编辑部：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
$ = function(id){return document.getElementById(id);}
var tags = [];//存放标签，避免重复加入。具体标签的结构你自己定义，我是根据你已有的代码写的。
var SPLITCHAR = ',';//设定分隔符是,
//这里假设你的单击tag的含义是只添加不删除。
function checktag(o){
var d = $('demo');
tags = d.value.split(SPLITCHAR);
var v = o.innerHTML;//如果你的tag有别的值或者别的非innerHTML里体现的内容，自行修改。
if (tags.length==0){
    d.value=s=v;
    tags.push(v);
}
else{
    var s = SPLITCHAR+tags.join(SPLITCHAR)+SPLITCHAR
    if (!new RegExp(SPLITCHAR+v+SPLITCHAR,'g').test(s)){
      s+=v;
    }
    s = s.replace(new RegExp("(^"+SPLITCHAR+"|"+SPLITCHAR+"$)","g"),'');
    d.value = s;
    tags = s.split(SPLITCHAR);
}
}
</script>
</head>
<body>
<input type="text" id="demo" size="100" />
<br>
选择标签: <a href="javascript:void(0)" onclick="checktag(this)">1</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag(this)">2</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag(this)">3</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag(this)">4</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag(this)">5</a>&nbsp&nbsp<a href="javascript:void(0)" onclick="checktag(this)">6</a>
<br>
</body>
</html>

Javascript视频教程编辑部