jquery manifest回车实现输入框标签显示效果代码-html代码-BFW代码库

jquery manifest回车实现输入框标签显示效果代码

代码语言：html

代码描述：jquery manifest回车实现输入框标签显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        body {
    font-family: Georgia, sans-serif;
    padding: 40px;
}

        div#container {
            margin: auto;
            width: 780px;
        }

        a {
            color: #000000;
        }

        em {
            busy .giffont-style: italic;
        }

        h1 {
            font-size: 1.8em;
            margin-bottom: 40px;
        }

        h2 {
            color: #C0C0C0;
            font-size: 1.2em;
            margin: 20px 0;
        }

        ol#examples {
            list-style-type: square;
            margin-left: 20px;
        }

        ol#examples li {
            line-height: 1.4em;
            margin-bottom: 20px;
        }

        form img {
            display: none;
            margin: 5px 0 0 10px;
            vertical-align: top;
        }

        form.mf_busy img {
            display: inline;
        }

        pre {
            line-height: 1.4em;
        }

        /*** Manifest ***/

        /* Manifest container that wraps the elements and now acts as, and should be
   styled as, the input. */
        div.mf_container {
            border: 1px solid #ddd;
            cursor: text;
            display: inline-block;
            width: 89%;
            background: #fff;
            border-radius: 3px;
        }

        /* Ordered list for displaying selected items. */
        div.mf_container ol.mf_list {
            display: inline;
        }

        /* Selected item, regardless of state (highlighted, selected). */
        div.mf_container ol.mf_list li.mf_item {
            cursor: pointer;
            display: inline-block;
            margin: 2px;
            padding: 2px 4px 3px;
            font-size: 12px;
            vertical-align: top;
            margin-top: 6px;
        }

        .mf_itemError {
            color: red;
        }

        /* Selected item that's highlighted by mouseover. */
        div.mf_container ol.mf_list li.mf_item.mf_highlighted {
            background-color: #E0E0E0;
        }

        /* Selected item that's selected by click or keyboard. */
        div.mf_container ol.mf_list li.mf_item.mf_selected {
            background-color: #C0C0C0;
        }

        /* Remove link. */
        div.mf_container ol.mf_list li.mf_item a.mf_remove {
            color: #E0E0E0;
            margin-left: 10px;
            text-decoration: none;
        }

        /* Remove link that's highlighted. */
        div.mf_container ol.mf_list li.mf_item.mf_highlighted a.mf_remove {
            color: #FFFFFF;
        }

        /* Remove link that's selected. */
        div.mf_container ol.mf_list li.mf_item.mf_selected a.mf_remove {
            color: #FFFFFF;
        }

        /* Actual input, styled to be invisible within the container. */
        div.mf_container input.mf_input {
            border: 0;
            font: inherit;
            /* font-size: 100%; */
            margin: 2px;
            outline: none;
            padding: 4px;
            font-size: 12px;
            color: #333;
        }

        /*** Marco Polo ***/.........完整代码请登录后点击上方下载按钮下载查看