根據已經輸入的輸入來調整輸入字段的大小

Question

好吧，由於某種原因，我需要有一個輸入字段，當選中復選框時，該字段會填滿。 輸入字段將復選框的值作為輸入。 之后，我需要將該值放在另一個輸入字段中，該字段是只讀的，其樣式設置為看起來不像輸入（不要問），但是如果該值長於該字段，則會部分顯示文本。

現在，我看到了一些代碼，在類似here的情況下有幫助，但僅在字段中輸入文本時才有用。 我需要根據已輸入的值進行更改。

我有這個：

<input type="checkbox" id="single_room" value="Single room"/>
<input type="text" name="single_room_input" id="single_room_input" style="display: none;">

然后將值提交並用php處理，並再次顯示在另一個輸入字段中：

<span class="text">
{$single_room_input}
</span>
<input class="overview-data" name="single_room_input" value="{$single_room_input}" readonly>

如果我用

$(function () {
$('.overview-data').on('input', function () 
{ $('.text').text($('.overview-data').val()); });
});

除非您實際輸入內容，否則它不會調整輸入字段的大小。

如果有人可以告訴我是否有可能，如果可以的話-怎么做我需要做的事，我將不勝感激。

Answer 1

因此，如果我對它的理解正確，您將有一個包含值的復選框。 當您單擊該復選框時，輸入字段將填充復選框的值，並且另一個READONLY輸入字段也將填充相同的值？

然后，您可以執行以下操作：

$(document).on("click", "#single-room", function() {
 var checkboxValue = $(this).val();
 $("#single-room-input").val(checkboxValue);
 $("#your second input field id").val(checkboxValue)
//then do .css to style the length
});