今天主要实现的是清空文本框的内容 外加其他的一些小功能~
直接上代码 哈哈
HTML
<div class="operation"> <div class="search"> <input value="" id="keyword" name="search" placeholder="请输入会议名称/会议室ID/套餐/Room"/> <div class="delete-icon-box"> <b class="delete-icon"></b> </div> <div class="search-icon-box" id="searchBtn"> <b class="search-icon"></b> </div> </div> </div> CSS
.operation{ width: 100%; position:relative; background-color: #ccc; } .operation .search{ float: right; margin-top: 8px; margin-right: 10px; position: relative; height: 36px; border:1px solid #d0d3db; border-radius: 4px; padding: 0 65px 0 4px; background-color: #fff; } .operation .search.active{ border:1px solid #3fa9f2; } .operation .search input{ width: 500px; height: 26px; padding: 4px 7px; line-height: 23px; position: relative; border:none; border-radius: 3px; outline: none; } .operation .search .delete-icon-box{ width: 20px; height: 100%; position: absolute; top: 0; right: 45px; cursor: pointer; display: none; } b{ background-image: url(img/icon.png); background-repeat: no-repeat; vertical-align: middle; display: inline-block; } .operation .search .delete-icon-box b{ width: 20px; height: 20px; background-position: -810px -319px; position: absolute; top: 9px; right: 0; } .operation .search .search-icon-box{ width: 40px; height: 100%; position: absolute; top: 0; right: 0; cursor: pointer; } .operation .search .search-icon-box.blue{ background-color: #3fa9f2; border-radius: 0 2px 2px 0; } .operation .search .search-icon-box.blue b.search-icon{ background-position: -384px -94px; } .operation .search .search-icon-box .search-icon{ width: 25px; height: 25px; background-position: -257px -180px; top: 9px; right: 5px; position: absolute; } JS
//为input添加autocomplete=off function addInputAutocomplete(){ $('input').attr("autocomplete","off"); } $(function(){ addInputAutocomplete() $(document).on('focus','.operation .search input',function(){ $(this).parents('.search').addClass('active'); $(this).parents(".search").find(".search-icon-box").addClass('blue'); }); $(document).on('blur','.operation .search input', function () { $(this).parents('.search').removeClass('active'); $(this).parents('.search').find('.search-icon-box').removeClass('blue'); }); $(document).on('keyup',"#keyword",function(){ //input输入值的时候让按钮显示 var s=$(this).val().length; if(s>0){ $(".delete-icon-box").css("display","block") }else( $(".delete-icon-box").css("display","none") ) }) $(document).on('click','.operation .search .delete-icon-box',function(){ $('#keyword').val("").focus(); //可以使用 jQuery 设置内容的val()方法来实现，设置内容为空即达到清空文本框内容的目的： $(".delete-icon-box").hide(); }) })
