如何在文本數量後輸入大小輸入

Question

如何使我的輸入框長度相對於文本的數量？

<div class="kontakt"> 
       <h2>Kontakt oss</h2> 
       <p>Hei! Jeg heter <input type="text" name="navn" placeholder="navn">, og jeg lurer på følgende:</p> 

CSS：

.kontakt { 
margin-top: 4%; 
font-size: 80%; 
text-align: center; 
} 
.kontakt input{ 
    border:none; 
    border-bottom: 1px solid black; 
    background:none; 
    color:white; 
    opacity: 0.7; 
    text-align: center; 
    size: relative; 
} 

Answer 1

這將幫助你：

adjustable text area

---

$('input[type="text"]').keypress(function(e) { 
    if (e.which !== 0 && e.charCode !== 0) { // only characters 
     var c = String.fromCharCode(e.keyCode|e.charCode); 
     $span = $(this).siblings('span').first(); 
     $span.text($(this).val() + c) ; // the hidden span takes 
             // the value of the input 
     $inputSize = $span.width() ; 
     $(this).css("width", $inputSize) ; // apply width of the span to the input 
    } 
}) ; 

Answer 2

你可以試試這個： -

style='width:20em' 

鏈接： - Input size vs width