提示功能&&标签动态添加

时间 2019-11-12
标签提示功能标签动态添加繁體版
原文原文链接
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,div,h3,input,ul,li{margin: 0;padding: 0;}
        li{list-style: none;}
        body{font-family:"宋体";font-size: 12px;background: #e3e3e3;color: #828282;}
        /*正文部分*/
        #box{width: 179px;margin: 0 auto;}
        #box h3{width:174px;height:30px;line-height:30px;font-weight: normal;color: #828282;padding: 35px 0 0 5px;font-size: 16px;}
        #box input{display:block;width:170px;height:28px;line-height:28px;font-size:12px;color:#d8d8d8;padding-left: 6px;border: 1px solid #bcbcbc;margin-top: 6px;margin-left: 1px;}
        .insert{width: 179px;height: auto;margin-top: 8px; padding-bottom: 18px;background:url("images/insert_bg.png") no-repeat  left bottom;}
        .insert ul{width:169px;background: #fff;border: 1px solid #d1cfd0;border-bottom: none;padding: 5px 0 9px 8px;overflow: hidden;}
        .insert ul li{width:auto;height: 25px;line-height:25px;background: #bee2f0;color: #fff;float: left;margin:5px 0 0 4px;padding:0 15px 0 6px;display: inline;position: relative;white-space: nowrap;}
        .insert ul li i{font-style: normal;position: absolute;width: 7px; height: 7px; line-height: 7px;text-align: center;right: 4px;top: 6px;cursor: pointer;}
    </style>
</head>
<body>
<div id="box">
    <h3>贴标签，赢人气</h3>
    <input type="text" value="添加标签，用空格或回车确认" />
    <div>
        <ul>
        <!--<li><span>你们好</span><i>x</i></li>
        <li><span>嗨嗨嗨的</span><i>x</i></li>
        <li><span>嗨嗨嗨的dfafdfff</span><i>x</i></li><!--为了后期写js判断重复方便，最好有span标签-->
        </ul>
    </div>
</div>
</body>
<script>
    var box=document.getElementById("box");
    var inputObj=box.getElementsByTagName("input")[0];
    var ulObj=box.getElementsByTagName("ul")[0];
    var spanObj=ulObj.getElementsByTagName("span");
    function trim(str){//删除左右两端的空格
        return str.replace(/(^\s*)|(\s*$)/g,"");
    }

    inputObj.onkeydown= function (e) {
        var valueText;
        var event=e||window.event;
        var keyCode=event.which||event.keyCode;
        if(keyCode==13||keyCode==32){
            valueText=trim(this.value);
            if(valueText.length>12)
            {//避免标签长度过长
                return alert("标签过长");
            }
            if(valueText=="")
            {//避免空值的体验
                 return alert("请勿输入空值");
            }
            var spanObj=ulObj.getElementsByTagName("span");
            for(var i=0;i<spanObj.length;i++){//避免重复的体验
                if(spanObj[i].innerHTML==valueText){//获得span之间的值
                 return alert("请勿输入重复");//强制跳出函数
                }
            }

            var liNode=document.createElement("li");//开始进行插入
            liNode.innerHTML="<span>"+valueText+"</span><i>x</i>";
            ulObj.appendChild(liNode);
            this.value="";
        }
    };
    ulObj.onclick=function(e){//删除效果
         var event=e||window.event;
         var target=event.target||event.srcElement;
             if(event.target.nodeName.toLowerCase()=="i"){//保证进入判断的target值为i
                    this.removeChild(target.parentNode);
             }
    };
    inputObj.onfocus= function () {//当鼠标在input上时，得到焦点，并根据判断去除原始值
        var val=trim(this.value);
        if(val=="添加标签，用空格或回车确认"){
        this.value="";
        inputObj.style.color="#828282";
        }
    };
    inputObj.onblur= function () {//光标离开后，恢复原始值
        var val=trim(this.value);
        if(val==""){
            inputObj.value="添加标签，用空格或回车确认";
            inputObj.style.color="#d8d8d8";
        }
    }
</script>
</html>