展開一個文本框以適應CSS的內容？

我試圖讓文本框根據需要增長以適應輸入的文本，達到父div寬度的80％。展開一個文本框以適應CSS的內容？

有什麼辦法只用CSS來做到這一點？如果沒有，我打開Javascript解決方案，但我使用React，這使事情變得複雜

2017-04-23 Slbox

可能的複製http://stackoverflow.com/q/8100770/483779 – Stickers

無解的有相關陣營遺憾的是，除了可能''爲'contentEditable'，但我在表單中使用輸入。 – Slbox

你想要一個'input'來增加垂直，多行的內容嗎？ ...如果是的話，你不能（當Chrome瀏覽器允許它使用'word-break：break-word;'時，它會出現這種情況），input是單行表單元素，textarea是多行表單元素 – LGSon

也許你可以在父div的80％是父div。然後爲文本框設置寬度：自動。聽起來有點棘手。

來源

2017-04-23 16:15:12

寬度自動在文本框中，只會讓它填滿80％的所有時間，我想，不是嗎？ – Slbox

陛下...試試這個：

display: inline-block;

我不知道壽。讓我知道它是否有效。

來源

2017-04-23 16:37:26

我試圖得到儘可能需要適應文本輸入進去，到父div的寬度的80％的文本框增長。

我很確定這不可能通過CSS單獨使用，因爲CSS無法確定textarea的文本內容的長度。

用JavaScript，在每一個按鍵，可以檢查文本內容的長度，並且如果：

文本內容是上述一定數目的按鍵的;和
的textarea的寬度仍小於最大允許寬度

則textarea可以逐步擴大窄。

工作實例：

var myTextArea = document.getElementsByTagName('textarea')[0]; 
 
var myTextLength = myTextArea.value.length 
 
var myTextWidth = parseInt(window.getComputedStyle(myTextArea).width); 
 
var myTextMinLength = 20; 
 
var myTextMaxWidth = ((parseInt(window.getComputedStyle(document.body).width)/100) * 80); 
 

 
function checkTextLength() { 
 
    myTextLength = myTextArea.value.length; 
 
    
 
    if ((myTextLength > myTextMinLength) && (myTextWidth < (myTextMaxWidth))) { 
 
      myTextWidth += 8; 
 
     } 
 
    
 
    myTextArea.style.width = myTextWidth + 'px'; 
 
} 
 

 
myTextArea.addEventListener('keypress', checkTextLength, false);

textarea { 
 
width: 180px; 
 
height: 40px; 
 
}

<form> 
 
<textarea placeholder="Start typing..."></textarea> 
 
</form>

來源

2017-04-25 01:05:46 Rounin

展開一個文本框以適應CSS的內容？

回答

相關問題