因為有需求所以研究怎麼寫這樣的 UI: 如果在input的時候，想要後面一直有固定的值的寫法，又希望在打的時候能夠自動跟著輸入的值，這樣看起來使用者會覺得這個值就是之後會輸入到系統的值。
首先準備 html:
- <div class="input_row clearfix">
- <label>Account</label>
- <div class="input_area">
- <input type="text" class="input_field" size="2">
- <span title="thisisacompanythisisacompany">@thisisacompanythisisacompany</span>
- </div>
- </div>
這邊簡單提一個東西，因為@後面的寬度也必須要固定，當長度太長的時候才不會爆版，又因為系統可以輸入的寬度可以到20個以上，為了讓版面好看，我就限制住寬度，再用CSS 3讓文字超過寬度會出現 "..." 的字，這樣做起來就很好看了。
- .input_area span{
- display:block;
- float:left;
- width:100px;
- text-overflow:ellipsis;
- overflow:hidden;
- }
IE就不管他了。
再來寫 js，讓輸入欄位可以跟著變動，這樣效果就完成了。
- function resizeInput() {
- $length=$(this).val().length;
- if($length==0){
- $(this).attr('size', 2);
- }else if($length<15){
- $(this).attr('size', $(this).val().length);
- }else{
- $(this).attr('size', 15);
- }
- }
- $('.input_field')
- // event handler
- .keyup(resizeInput)
- // resize on page load
- .each(resizeInput);
- });
![[Vue.js] 設定 class 與 style](/assets/upload/1583563899683_0.jpg)
