javascript - 让输入文本的背景图像在点击 "Enter"时滑出 View ？

Question

它已经编码为在用户单击图像时滑出 View ，但我不知道如何让它在用户点击输入区域中的“输入”时执行相同的操作。

有点沮丧...

http://jsfiddle.net/mlynn/vxzc6z6y/

JS代码:

// sub menus identification
$(function() {




  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input'),
        CategoryIcon;


    input.focus();  

    $(document).on('click', 'input.onX', function()
                  {

                      //alert(1);

                     if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;

                  });


    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().slideUp();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});







//clearable

jQuery(function($) {


  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });


});

CSS 代码:

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:#FFFFFF;                                /*Back Colors*/
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
    color: #34495e;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:#000000;
    position:relative; 
    /*background:url('http://wallpaperupdate.com/Images/product/plaid-wallpaper-kxeo-l.jpg');*/
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}



.LeftPanel{
    float:left;
    width:465px;

}



.RightPanel{
    float:right;
    width:465px;

}



.InterestContainer{
    height:374px;
    width:460px;
    background:none;
    vertical-align:top;
    /*border-color:#000;
    border-width:1px;
    border-style:solid;
    border-radius:4px;*/    
}


.mousescroll {
    overflow-x:hidden;
    overflow-y:auto;
}

/*
.mousescroll {
    overflow:hidden;   
}

.mousescroll:hover {
    overflow-y:scroll;
}*/



/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:#ccc;
  border-width:1px; 
  width: 130px;                /*Widthchanger1*/
  border-radius: 4px;
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
  height:33px;


}



.ActiveListItem:after {
    content: "\25BC";                        /*carat and spaces \00a0*/ 
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:17px;             /*keeps carat in center of text*/ 

}  



ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black !important;
    padding:3px 5px !important; 
    font-weight:normal !important;
    margin-left:10px;         /*Widthchanger2, got the activeitem centered with list text this way*/
    margin-right:0px;
    margin-top:5px;
    margin-bottom:6px;
    width:100px;   /*kinda messes with width of text*/

}

ul.navbar li {
    position: relative;
    width:130px;                        /*Changes width of actual list*/
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#dadfe1; 
    color: #34495e;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }







/*Lister*/



.container {


}

form {  }



.lister input {
    border-radius: 5px;
    width:278px;   /*width of todo input box*/
    height:33px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid #ccc;
    float:left;
    margin-bottom:20px;
    font-size:14px;
    font-family:"Tahoma";
}

.lister ul {
    /*list-style: square inside;*/
    padding: 10px; /* padding for outside area of list*/  /* This is what's visible when not in use*/
    width:419px;
    background: #eee;
    border-radius: 5px;
    /* width: 100%; */
    font-family:"Tahoma";


}

.active { border: 1px solid #ccc; }

.inactive { display: none;}

.lister li {
    padding: 10px; /*controls height of list items*/
    font-size:16px; /*font size of list items*/
    font-weight: 600;
    color: #34495e;
    text-align:left;
}


.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


/*.lister li:before {
    content: "";                        
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             
}


.CategoryIcon {
    float:right;
    color:red;
    padding:40px 40px;
} */






/*Clearable*/

.clearable {
    background: #fff;
    background:url(http://s3.amazonaws.com/redditstatic/award/1_year_club-40.png);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position:right -15px center;

  transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; }
.clearable.onX { cursor: pointer; }

Answer 1

只需将这一行添加到您的 $('form').submit 函数中:

$('form').submit(function () {
    $(this).find('input').removeClass('x')
   ....
 }