提示功能&&標籤動態添加

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。