模仿某丰的 快递单号输入

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/LitongZero/article/details/89852137

模仿某丰的 快递单号输入

1、主要实现功能：

1、输入后，按回车进行分割。

2、点击x后，删除当前选中。

3、获取输入列表数据

4、jsp回显

2、CSS样式

样式：
<style type="text/css">
        a
        {
            background: transparent;
            text-decoration: none;
        }
        .form-wrap
        {
            position: relative;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            border: 1px solid #e1e1e0;
        }
        .tokenfield
        {
            transition: min-height 120ms;
            height: auto;
            min-height: 87px;
            max-height: 200px;
            overflow-x: hidden;
            overflow-y: auto;
            box-shadow: none;
            border: none;
            background: none;
        }
        .tokenfield.form-control
        {
            padding: 7px;
        }
        .form-control
        {
            display: block;
            width: 100%;
            font-size: 13px;
            line-height: 1.42857;
            color: #333;
            vertical-align: middle;
            border-radius: 0;
        }
        .tokenfield .token.invalid
        {
            background: none;
            border: 1px solid transparent;
            border-radius: 0;
            border-bottom: 1px dotted #b94a48;
        }
        .tokenfield .token
        {
            box-sizing: border-box;
            display: inline-block;
            margin: -1px 5px 5px 0;
            vertical-align: top;
            cursor: default;
            padding: 0 7px;
            height: 24px;
            line-height: 24px;
            font-size: 13px;
        }
        
        .tokenfield .token .token-label
        {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            color: gray;
            white-space: nowrap;
        }
        
        .tokenfield .token .close
        {
            margin-left: 0;
            font-size: 15px;
        }
        .close
        {
            font-family: "Hiragino Sans GB" ,simsun, "Microsoft YaHei" ,sans-serif;
            display: inline-block;
            line-height: 24px;
        }
        .close
        {
            float: right;
            font-weight: bold;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: 0.2;
            filter: alpha(opacity=20);
        }
        
        .tokenfield .token-input
        {
            background: none; /*
    min-width: 60px;
width: 100%;
*/
            border: 1px solid transparent;
            line-height: 24px;
            font-size: 13px;
            box-shadow: none;
            height: 24px;
            padding: 0;
        }
        .tokenfield .token-input:focus
        {
            border-color: transparent;
            outline: 0;
            box-shadow: none;
        }
        .form-wrap .notice
        {
            color: #ccc;
            font-size: 12px;
            padding: 0 10px 5px;
        }
    </style>

3、js

<script language="javascript">
        $(function () { 
            $("a.close").live("click", function () {
                $(this).parent().remove();
                return false;
            });
            $("input.token-input").keyup(function (event) {
                var event = window.event || event;
                if (event.keyCode == 13) {
                    if ($(this).val() != "") {
                        var strHTML = "<div class=\"token invalid\" data-value=\"" + $(this).val() + "\"><span class=\"token-label\" style=\"max-width: 251px;\">" + $(this).val() + "</span><a href=\"#\"  class=\"close\" tabindex=\"-1\">×</a></div>";
                        $(this).val("");
                        $(this).before(strHTML);
                        $(this).focus();
                    }
                }
            });
        });
    </script>

4、html

<div style="width: 500px">
        <div class="form-wrap">
            <div class="tokenfield form-control">
                <c:forEach var="item" items="${data.list}">
                   <div class="vin invalid" data-value="${item.value}">
                        <span class="vin-label" style="max-width: 251px;">${item.value}/span>
                        <a href="#" class="close" tabindex="-1">×</a>
                    </div>
                 </c:forEach>
                <input type="text" class="token-input" autocomplete="off" placeholder="" id="1410764747876174-tokenfield"  tabindex="0" style="min-width: 90px; width: 124px;">
                <div class="notice">
                    最多可同时查询20条运单号，请以逗号、空格或回车键隔开。</div>
            </div>
        </div>
    </div>

5、获取输入数据方法

function getInputData() {
    var dataList = "";
    for (let i = 0; i < $('.token-input').length; i++) {
        if (i == $('.token-input').length - 1) {
            dataList += ($('.token-input').eq(i).html());
        } else {
            dataList += ($('.token-input').eq(i).html()) + ",";
        }
    }
    return dataList ;
}

6、回显数据

<c:forEach var="item" items="${data.list}">
   <div class="vin invalid" data-value="${item.value}">
        <span class="vin-label" style="max-width: 251px;">${item.value}/span>
        <a href="#" class="close" tabindex="-1">×</a>
    </div>
 </c:forEach>