passen Sie die Breite des Eingangs, die der Wert Länge des Eingangs entsprechen

Question

Ich versuche, eine automatische Größenanpassung wie Eingabe, wie wenn der Benutzer eingeben, wird der Eingang automatisch anpassen, um den Wert innerhalb der Eingabe aber anzupassen Es scheint, ich kann es nicht richtig machen oder arbeiten. Irgendwelche Ideen, bitte helfen?

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    $(this).css('width',$(this).width()+$(this).val().length); 
 
    }); 
 
});

input{border:1px solid red;width:30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<input type="text">

Answer 1

Wenn Ihr Ziel ist es mit einem 30px Puffer nur so breit wie nötig, vielleicht zu sein, dann ist die Frage, du bist die Breite besser untermauern jedes Mal, als Neuberechnung von Grund auf neu. Es würde auch helfen, wenn Sie wüssten, wie breit ein Zeichen sein könnte, also ist es wahrscheinlich am besten, die Schriftgröße speziell einzustellen oder sogar ein anderes verstecktes Element zu verwenden, um zu messen, wie breit der gerenderte Text ist; hier habe ich ein span dafür verwenden:

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    var $this = $(this); 
 
    // Get the value 
 
    var val = $this.val(); 
 
    
 
    // Put it in the hidden span using the same font information 
 
    var $hidden = $(".hidden"); 
 
    $hidden.text(val); 
 
    
 
    // Set the input to the span's width plus a buffer 
 
    $this.css('width', $hidden.width() + 30); 
 
    }); 
 
});

input { 
 
    border:1px solid red; 
 
    font-size: 14px; 
 
    width:30px; 
 
} 
 
.hidden { 
 
    font-size: 14px; 
 
    display: none; 
 
}

<input type="text"> 
 
<span class="hidden"></span> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

I contenteditable-span in diesem Fall empfehlen die Verwendung, ich hoffe, es hilft.

#test{border:1px solid red;width:30px;}

<span id="test" contenteditable>I'm trying to make an auto resize like input</span>