首页 > 代码库 > 顺丰物流单号查询效果(可输入多个文本框)

顺丰物流单号查询效果(可输入多个文本框)

样式:<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>

 

<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=http://www.mamicode.com/"" + $(this).val() + "\"><span class=\"token-label\" style=\"max-width: 251px;\">" + $(this).val() + "</span><a href=http://www.mamicode.com/"#\"  class=\"close\" tabindex=\"-1\">×</a></div>";                        $(this).val("");                        $(this).before(strHTML);                        $(this).focus();                    }                }            });        });    </script>
<div style="width: 500px">        <div class="form-wrap">            <div class="tokenfield form-control">                <div class="token invalid" data-value="发送到发送到">                    <span class="token-label" style="max-width: 251px;">发送到发送到</span><a href="#" class="close"                        tabindex="-1">×</a></div>                <div class="token invalid" data-value="吃的发送到发送到发送到发送到">                    <span class="token-label" style="max-width: 251px;">吃的发送到发送到发送到发送到</span><a href="#"  class="close" tabindex="-1">×</a></div>                <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>

 

顺丰物流单号查询效果(可输入多个文本框)