自動調整大小的文本輸入框html

我創建了一個輸入（輸入文本）框並使其自動調整大小非常簡單。不過，也有，我似乎無法修復一些小問題：自動調整大小的文本輸入框html

當我開始輸入框縮小一點點
當我按空格鍵（或定向箭頭），盒子首先擴展，然後在繼續打字時縮小。

這裏是我的代碼：

function Expander() { 
 
    \t 
 
    this.start = function() { 
 
    \t \t \t 
 
     $("#inputbox").keydown(function(e) { 
 
       \t \t \t 
 
      this.style.width = 0; 
 
      var newWidth = this.scrollWidth + 10; 
 
    \t \t \t 
 
      if(this.scrollWidth >= this.clientWidth) 
 
       newWidth += 10; 
 
    \t \t \t \t 
 
      this.style.width = newWidth + 'px'; 
 
    \t \t \t 
 
     }); 
 
    \t \t 
 
    } 
 
    \t 
 
} 
 
    
 
    
 
$(function() { 
 
    \t window.app = new Expander(); 
 
    \t window.app.start(); 
 
});

input { 
 
    \t margin-left:3em; 
 
    \t min-width:100px; 
 
    \t max-width:600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<meta charset="UTF-8"> 
 
<body> 
 

 
    <div id="wrap"> 
 
    \t <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/> 
 
    </div> 
 
    <div id="counter"></div> 
 
</body>

來源

2013-10-17 rockerist

只是一個觀察，思考粘貼文本或按某個鍵並保持。也許你應該看看這個答案的插件：相反，請參閱http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields。 – Pricey

謝謝，我還沒有完成我的代碼，只是想知道爲什麼它有問題。我永遠不會學習語言，如果我只是從別人的代碼:) – rockerist

你不需要只是採取代碼，你可以分析他們的代碼在做什麼，所以你可以編寫自己的插件，我發現時，非常有用的學習。 – Pricey

-1

<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>

取出width="100px"，就像這樣：

<input type="text" id="inputbox" name="input" placeholder="yes"/>

而且它不會調整下來的時候了STA正在打字。

活生生的例子：

http://jsfiddle.net/2EMfd/

雖然，exanding功能似乎並不在我的瀏覽器工作？

*編輯，inputbox做了簡單的擴展功能，這是你在哪裏試圖？ http://jsfiddle.net/2EMfd/1/

來源

2013-10-17 11:23:06

謝謝，但沒有。第二個鏈接在每次按鍵時調整大小，即使在cmd和方向箭頭上也是如此。我需要它隨着內容到達輸入框的寬度而擴大。 – rockerist

首先，您可以使用jQuery方法來避免交叉瀏覽器問題。 scrollWidth返回元素內容的寬度（以像素爲單位）或元素本身的寬度（以較大者爲準）。因此，只有在內容寬度大於元素寬度時才放大newWidth。

$("#inputbox").keydown(function(e) { 

    var a = $(this).width(), newWidth; 


    if(this.scrollWidth - a > 0){ 
    newWidth = a + 10; 
    }else if(e.keyCode==8){ 
    newWidth = a - 10; 
    } 
    $(this).css("width", newWidth); 

});

如果您不想在按退格鍵時使輸入變小 - 刪除其他部分代碼。

來源

2013-10-17 11:33:06 wmbtrmb

好吧，這工作得很好，但我不想硬編碼到它的密鑰，因爲如果我按刪除此代碼不起作用。我希望盒子根據其內容進行調整。 – rockerist

你可以試試這個。

我們把內容隱藏起來span &然後根據span scrollWidth調整寬度。

function Expander() { 
 

 
    this.start = function() { 
 

 
     $('#inputbox').on('keydown',function(e) { 
 

 
      $("#hidden_span").html(""); 
 
      $("#hidden_span").append("<p>"+$(this).val()+"</p>"); 
 

 
      var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth; 
 

 
      if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){ 
 
       $(this).css("width",hidden_span_scroll_width); 
 
      } 
 

 
     }); 
 

 
    } 
 

 
} 
 

 

 
$(function() { 
 
    window.app = new Expander(); 
 
    window.app.start(); 
 
});

input { 
 
    margin-left:3em; 
 
    min-width:100px; 
 
    max-width:600px; 
 
} 
 

 
#hidden_span{ 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    visibility:hidden; 
 
    width:10px; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
}

<head> 
 
<meta charset="UTF-8"> 
 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
 
</head> 
 

 
<body> 
 
<div id="wrap"> 
 
    <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." /> 
 
</div> 
 
<div id="counter"></div> 
 
<span id="hidden_span"></span> 
 
</body>

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<title>Test page</title> 
</head> 

<body> 
<style> 
input { 
    margin-left:3em; 
    min-width:100px; 
    max-width:600px; 
} 
     #hidden_span{ 
      position:absolute; 
      top:0px; 
      left:0px; 
      visibility:hidden; 
      width:10px; 
      white-space:nowrap; 
      overflow:hidden; 

     } 
</style> 
<script> 

function Expander() { 

    this.start = function() { 

     $('#inputbox').on('keydown',function(e) { 


      $("#hidden_span").html(""); 
      $("#hidden_span").append("<p>"+$(this).val()+"</p>"); 


      var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth; 

    if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){ 
       $(this).css("width",hidden_span_scroll_width); 
        } 


     }); 

    } 

} 


$(function() { 
    window.app = new Expander(); 
    window.app.start(); 
}); 

</script> 
<div id="wrap"> 
    <input type="text" id="inputbox" name="input" placeholder="yes" /> 
</div> 
<div id="counter"></div> 
<span id="hidden_span"></span> 
</body> 
</html>

來源

2013-10-17 11:47:42 Peeyush

謝謝，這解決了我的問題，但它不會調整刪除和退格。雖然這是一個更容易的修復。 – rockerist

@rockerist我編輯了我的上面的代碼，現在它也應該與刪除工作。這裏是演示http://jsfiddle.net/vdv9q/ – Peeyush

自動調整大小的文本輸入框html

回答

相關問題