如何在文本量后调整输入大小

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