一. 需求:
页面中至少有一个input框、两个button按钮,具体样式参考群内截图
输入框内输入昵称,点击“完成添加”按钮会在组员展示中新增一个刚刚添加的组员名
点击继续添加按钮,清空输入框,但要保证组员展示内容不动
昵称中不可以出现逗号、不能输入空格、不可添加重复昵称
二. 思路
①.获取输入框中输入内容,保存在变量当中,以后每次添加都要对变量使用+=操作进行拼接
②.昵称中逗号、空格、重复昵称的判断,可以使用indexOf,如果返回的结果是-1,则表示不存在以上内容
③.组员名称通过拼接保存在变量中时,最好添加逗号进行区分如:小陈,小王,小刘
④.展示时,可通过indexof获取逗号的索引,结合substring或slice,以逗号的索引为终点进行截取然后输入
⑤.④步骤的截取操作只能实现一次,要想对前一次截取部分继续截取,需要使用for循环进行操作
道理都明白,就是实现不了
这样?有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
昵称:<input type="text" id="t" /><input type="button" value="完成添加" onclick="addItem()" /><input type="button" value="继续添加" onclick="clearInput()"/>
<div id="dv"></div>
<script>
var t = document.getElementById('t');
var s = ',';
function clearInput() { t.value = ''; }
function addItem() {
var v = t.value.replace(/[,\s]/gi, '')//去掉逗号,空格
if (v == '') { alert('昵称不能为空!'); t.focus(); return false; }
if (s.indexOf(',' + v + ',') != -1) { alert('昵称“'+v+'”已经存在!'); t.select(); return false; }
s += v + ',' ;
console.log(s)
dv.inneaaarHTML = '成员:' + s.replace(/^,|,$/g,'');//正则去掉首尾逗号
clearInput();
}
</script>
说清楚具体是哪里实现不了呢