CSS - 在輸入足夠的字符時擴展搜索欄問題

Question

我正在創建一個擴展搜索欄，但問題是當輸入足夠多的字符到文本輸入中時，它們會出現在搜索按鈕下方。

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box'); 
 
     } 
 

 
    });

 .form-container{ 
 
      width: 600px; 
 
      margin: 0 auto; 
 
      border: 1px solid #000; 
 
      padding: 33px 14px; 
 
     } 
 

 
     .form-container:after{ 
 
      content: ''; 
 
      display: block; 
 
      clear: both; 
 
     } 
 

 
     form{ 
 
      position: relative; 
 
      float: right; 
 
     } 
 

 
     .search-box{ 
 
      top: 0; 
 
      right: 0; 
 
      width: 90px; 
 
      transition: width 0.3s ease-out; 
 
      padding: 10px 0px; 
 
      padding-left: 10px; 
 
      outline: none; 
 
     } 
 

 
     .search-submit{ 
 
      position: absolute; 
 
      width: 110px; 
 
      top: 0; 
 
      right: 0; 
 
      padding: 10px 0px; 
 
     } 
 

 
     .expanded-search-box{ 
 
      width: 500px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-container"> 
 
    <form action="" class="form"> 
 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
     <input type="submit" class="search-submit"> 
 
    </form> 
 
</div>

我想告訴搜索欄按鈕被點擊時。

我嘗試將padding-right添加到輸入文本元素，但它變得可見。

如何解決這個問題？

Answer 1

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box'); 
 
     } 
 

 
    });

 .form-container{ 
 
      width: 600px; 
 
      margin: 0 auto; 
 
      border: 1px solid #000; 
 
      padding: 33px 14px; 
 
     } 
 

 
     .form-container:after{ 
 
      content: ''; 
 
      display: block; 
 
      clear: both; 
 
     } 
 

 
     form{ 
 
      position: relative; 
 
      float: right; 
 
     } 
 

 
     .search-box{ 
 
      top: 0; 
 
      margin: 0; 
 
      width: 0; 
 
      transition: width 0.3s ease-out; 
 
      padding: 10px 0; 
 
      padding-left: 10px; 
 
      outline: none; 
 
     } 
 

 
     .search-submit{ 
 
      position: absolute; 
 
      width: 110px; 
 
      top: 0; 
 
      right: 0; 
 
      padding: 10px 0px; 
 
     } 
 

 
     .expanded-search-box{ 
 
      width: 470px; 
 
      padding: 10px 10px; 
 
      margin-right: 110px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-container"> 
 
    <form action="" class="form"> 
 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
     <input type="submit" class="search-submit"> 
 
    </form> 
 
</div>

Answer 2

在搜索文本輸入加法maxlength="20"

Answer 3

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
         searchbox.removeClass('padding'); 
 
      searchbox.addClass('search-width'); 
 

 

 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box '); 
 
      searchbox.addClass('padding'); 
 
      searchbox.addClass('search-width'); 
 
     } 
 

 
    });

.form-container{ 
 
       width: 600px; 
 
       margin: 0 auto; 
 
       border: 1px solid #000; 
 
       padding: 33px 14px; 
 
      } 
 
    .search-width{ 
 
     \t width: 0px; 
 
     } 
 
      .form-container:after{ 
 
       content: ''; 
 
       display: block; 
 
       clear: both; 
 
      } 
 

 
      form{ 
 
       position: relative; 
 
       float: right; 
 
      } 
 

 
      .search-box{ 
 
       top: 0; 
 
       right: 0; 
 
       width: 70px; 
 
       transition: width 0.3s ease-out; 
 
       padding: 10px 0px; 
 
       padding-left: 10px; 
 
       outline: none; 
 
       
 
      } 
 
      .padding{ 
 
      \t padding-right: 85px; 
 
      } 
 

 
      .search-submit{ 
 
       position: absolute; 
 
       width: 85px; 
 
       top: 0; 
 
       right: 0; 
 
       padding: 10px 0px; 
 
      } 
 

 
      .expanded-search-box{ 
 
       width: 500px; 
 
      }

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 
    <div class="form-container"> 
 
     <form action="" class="form"> 
 
      <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
      <input type="submit" class="search-submit"> 
 
     </form> 
 
    </div> 
 

 
    </body> 
 
    </html>

Use this code 

Answer 4

你可以添加填充右只有當.search-box擴展：

.expanded-search-box { 
    width: 350px; 
    padding-right: 150px; 
} 

另一種解決方案是沒有提交按鈕重疊輸入：

/* Reset the box-sizing */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
} 
 

 
/* Search group */ 
 

 
.search-group { 
 
    width: 100%; 
 
    max-width: 200px; 
 
    overflow: hidden; 
 
    margin-bottom: 1em; 
 
} 
 

 
.search-group--expanded { 
 
    max-width: 500px; 
 
} 
 

 
/* Search input */ 
 

 
.search-input { 
 
    float: left; 
 
    width: 75%; 
 
    padding: .5em 1em; 
 
} 
 

 
/* Search button */ 
 

 
.search-button { 
 
    float: right; 
 
    width: 25%; 
 
    padding: .5em 1em; 
 
    border: none; 
 
}

<div class="search-group"> 
 
    <input class="search-input" type="text" placeholder="Search for..."> 
 
    <button class="search-button" type="button">Submit</button> 
 
</div> 
 

 

 
<div class="search-group--expanded"> 
 
    <input class="search-input" type="text" placeholder="Search for..."> 
 
    <input class="search-button" type="submit" value="Submit"> 
 
</div>

Answer 5

請使用此代碼。 我已經爲你創建了一個jsfiddle。

<div class="form-container"> 
    <form action="" class="form"> 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
     <input type="submit" class="search-submit"> 
    </form> 
</div> 

$('.search-submit').click(function (e) { 
     e.preventDefault(); 

     var searchbox = $('.search-box'); 

     if(searchbox.hasClass('expanded-search-box')) 
     { 
      // close the form 
      searchbox.removeClass('expanded-search-box'); 
      searchbox.removeClass('dynamic-margin'); 
     } 

     else { 
      // open the form 
      searchbox.addClass('expanded-search-box'); 
      searchbox.addClass('dynamic-margin'); 
     } 

    }); 

.form-container{ 
      width: 600px; 
      margin: 0 auto; 
      border: 1px solid #000; 
      padding: 33px 14px; 
     } 

     .form-container:after{ 
      content: ''; 
      display: block; 
      clear: both; 
     } 

     form{ 
      position: relative; 
      float: right; 
     } 

     .search-box{ 
      top: 0; 
      right: 0; 
      width: 90px; 

      transition: width 0.3s ease-out; 
      padding: 10px 0px; 
      padding-left: 10px; 
      outline: none; 
     } 

     .search-submit{ 
      position: absolute; 
      width: 110px; 
      top: 0; 
      right: 0; 
      padding: 10px 0px; 
     } 

     .expanded-search-box{ 
      width: 400px; 
     } 
     .dynamic-margin{margin-right:100px;} 

https://jsfiddle.net/satyaprasanna/8x99tq0h/7/ 

感謝 薩蒂亞

Answer 6

更換你的CSS類

.expanded-search-box { 
    width: 395px; 
    padding: 10px; 
} 
.search-box { 
    top: 0; 
    right: 0; 
    width: 0px; 
    transition: width 0.3s ease-out; 
    padding: 10px 0px; 
    outline: none; 
    margin-right: 105px; 
}