javascript - 根据已输入的内容调整输入字段的大小

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
});