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

Posted

技术标签:

【中文标题】输入字段在设置值后扩展?【英文标题】:Input field extends after setting value? 【发布时间】:2017-11-21 15:50:07 【问题描述】:

在我的应用程序中,用户可以选择值并且该值将显示在文本输入字段中的表单很少。这些值通常是一到三个字符。一旦我选择了值,我的输入字段就会扩展(更改宽度)。输入字段有足够的空间(大小设置为 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"  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 结构没有任何变化(我在设置值后在我的开发工具中进行了监控)。

【问题讨论】:

你能创建一个小提琴或编码sn-p吗?还有其他一些我们看不到的事情 - 你检查过var codeVal 确实只是一个数字吗?当您返回时 .text() 它可以是任何东西 【参考方案1】:

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

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

【讨论】:

我已删除 css 并解决了问题。我仍然看不出这会影响输入字段大小的原因吗? 我会说输入的实际宽度是根据其字符数计算的,而字符的宽度取决于字符的粗细...

以上是关于输入字段在设置值后扩展?的主要内容,如果未能解决你的问题,请参考以下文章

填写值后在输入文本框时未触发提交。在 IE 中

使用 jQuery 设置输入值后更新 Angular 模型

填充所有值后如何自动调用函数

Laravel-从下拉列表中选择值后自动填充输入

Grafana:从面板插件配置 InfluxDB 查询。在从 typescript 设置值后使用 html 输入元素出现问题

更改值后反应组件未更新