任务目的

学习与实践JavaScript的基本语法、语言特性
练习使用JavaScript实现拖拽功能

任务描述

基于上个任务，将任务的代码进行抽象、封装，然后在此基础上实现如图中的两个需求：Tag输入和兴趣爱好输入
实现一个tag输入框
要求遇到用户输入空格，逗号，回车时，都自动把当前输入的内容作为一个tag放在输入框下面。
Tag不能有重复的，遇到重复输入的Tag，自动忽视。
每个Tag请做trim处理
最多允许10个Tag，多于10个时，按照录入的先后顺序，把最前面的删掉
当鼠标悬停在tag上时，tag前增加删除二字，点击tag可删除
实现一个兴趣爱好输入的功能
通过一个Textarea进行兴趣爱好的输入，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为间隔。
当点击“确认兴趣爱好”的按钮时，将textarea中的输入按照你设定的间隔符，拆解成一个个的爱好，显示在textarea下方
爱好不能重复，所以在下方呈现前，需要做一个去重
每个爱好内容需要做trim处理
最多允许10个兴趣爱好，多于10个时，按照录入的先后顺序，把最前面的删掉

整体思路

依然是按照要求首先写出HTML代码

<label>Tag: </label>
<input type="text" id="user_tag">
<div id="tags_wrap"></div>
<textarea id="hobby_input"></textarea>
<button id="hobby_btn">确认兴趣爱好</button>
<div id="hobby_wrap"></div>

然后给相应的元素绑定事件

function addHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent("on" + type,handler);
    }else{
        element["on" + type] = handler;
    }
}
function init(){
    var tag = $("#user_tag");
    var hobby_btn = $("#hobby_btn");
    var tags_wrap = $("#tags_wrap");
    var hobby_wrap = $("#hobby_wrap");
    addHandler(tag,"keyup",addTag);
    addHandler(hobby_btn,"click",addHobby);
}
init();

这里，我们用两个数组，分别用来保存Tag和Hobby。为了能够在添加Tag和Hobby时共用渲染数据函数，可以设置一个标志参数，用来标志是否需要添加点击删除事件

//渲染数据
function renderData(element,data,isDel){
    var text = "";
    for(var i=0;i<data.length;i++){
        text += '<div>' + data[i] + '</div>';
    }
    element.innerHTML = text;
    if(isDel){
        tagsEvent();
    }
}

然后根据题目要求，将添加Tag和Bobby函数写出来，其实就是对用户输入的数据进行检测和处理

//添加tag
function addTag(){
    var value = $("#user_tag").value;
    if(textCheck(value) || event.keyCode == 13){
        value = value.trim().replace(/[，, ]/, '');
        if(value){
            if(!contains(tags,value)){
                if(tags.length<10){
                    tags.push(value);
                }else{
                    tags.shift();
                    tags.push(value);
                }
            }
            $("#user_tag").value = "";
        }
    }
    renderData(tags_wrap,tags,true);
}
//添加兴趣
function addHobby(){
    var str_hobby = $("#hobby_input").value.trim();
    if(str_hobby){
        var hobbyWord = str_hobby.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/);
        for(var i=0;i<hobbyWord.length;i++){
            if(!contains(hobby,hobbyWord[i])){
                if(hobby.length<10){
                    hobby.push(hobbyWord[i]);
                }else{
                    hobby.shift();
                    hobby.push(hobbyWord[i]);
                }
            }
        }
    renderData(hobby_wrap,hobby,false);
    $("#hobby_input").value = "";
    }else{
        alert("请输入兴趣");
    }
}

最后只需把点击删除函数补充完整即可

//给每个tag添加mouse和click事件
function tagsEvent(){
    var eles = tags_wrap.children;
    for(var i=0;i<eles.length;i++){
        eles[i].addEventListener("mouseover",function(e){
            e.target.firstChild.insertData(0,'点击删除 ');
        });
        eles[i].addEventListener("mouseout",function(e){
            e.target.firstChild.deleteData(0,4);
        });
        eles[i].addEventListener("click",function(e){
            var node = e.target;
            //获取当前div在数组中的索引
            var index = [].indexOf.call(node.parentNode.children,node);
            tags.splice(index,1);
            //渲染数据
            renderData(tags_wrap,tags,true);
        });
    }
}

最终代码

最终代码
 演示地址

时间确实不够用，也没有对页面进行美美的修饰有时间的话一定补上