Javascript 动态输入字段宽度调整

我有两个字段，当数字被输入其中任何一个字段时，它们会改变彼此的值

我需要一种方法来改变它们的宽度，因为它们的值会改变，反之亦然

我尝试了

onchange

oninput

，但它们仅在用户手动单击字段并输入值时才起作用

这是我的密码

HTML

<input style="text-align:center;min-width:2px;width:100px" id="Field1" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 15) + 'px';">

<input style="text-align:center;min-width:2px;width:100px" id="Field2" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 15) + 'px';">

---

另一个解决方案是使用jQuery的

width

函数处理

keyup

事件中的所有内容。这有点难看，但应该给你一个想法：

var field1OriginalWidth=$（'#Field1'）.width（）；
var field2OriginalWidth=$（'#Field2'）.width（）；
$（'#Field1'）.keyup（函数（）{
field1Val=parseInt（$（this.val（））；
$（this）.width（10*$（this）.val（）.toString（）.length）；//根据输入长度计算所需的宽度
if（field1Val）{
field2Val=field1Val；
$（#Field2'）.val（field2Val.toFixed（8））；
$（'#Field2'）.width（$（this.width（））//设置其他字段的宽度
}否则{
$（'#Field2'）.val（“”）
$（'#Field1'）.width（field1OriginalWidth）；
$（'#Field2'）.width（field2OriginalWidth）；//将两个字段重置为某个原始宽度
}
});
$（'#Field2'）.keyup（函数（）{
field2Val=parseFloat（$（this.val（））；
$（this）.width（10*$（this）.val（）.toString（）.length）；
if（field2Val）{
field1Val=field2Val
$（'#Field1'）.val（parseFloat（field1Val）.toFixed（2））；
$（'#Field1'）.width（$（this.width（））
}否则{
$（'#Field1'）.val（“”）；
$（'#Field1'）.width（field1OriginalWidth）；
$（'#Field1'）.width（field1OriginalWidth）；
}
});


$('#Field1').keyup(function() {
    field1Val = parseInt($(this).val());
    if (field1Val) {
      field2Val = field1Val;
      $('#Field2').val(field2Val.toFixed(8));
    }
    else {
      $('#Field2').val("")
    }
});

$('#Field2').keyup(function() {
    field2Val = parseFloat($(this).val());
    if (field2Val) {
      field1Val = field2Val
      $('#Field1').val(parseFloat(field1Val).toFixed(2));
    }
    else {
      $('#Field1').val("")
    }
});