输入字段在设置值后扩展？

Question

在我的应用程序中，用户可以选择值并且该值将显示在文本输入字段中的表单很少。这些值通常是一到三个字符。一旦我选择了值，我的输入字段就会扩展（更改宽度）。输入字段有足够的空间（大小设置为 10），没有理由扩展。我检查了我的值是否被修剪，并且值没有什么奇怪的。我想知道这是否与我使用的 JQuery .val() 或其他有关？这是我的代码示例。

HTML：

<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>

JQuery:

//Looping through the table with the records where users choose desired code/value for their input field
$('#searchTbl tbody tr').on('click', function(){
    var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table
    $('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated
});

我附上了图片，您可以在其中看到用户选择值之前和之后的输入字段。场大小有明显差异。 HTML 结构没有任何变化（我在设置值后在我的开发工具中进行了监控）。

Answer 1

如果我是正确的，您不仅要设置一个值，还要应用一种样式：.css('font-weight','bold');，我怀疑这是您更改输入宽度的原因...

尝试删除对.css() 的调用以进行检查，如果确认，请尝试在渲染页面时应用您的样式一次...