动态输入字段宽度调整大小

我有两个字段，当数字输入到它们中的任何一个时，它们都会相互改变数值。动态输入字段宽度调整大小

我需要一种方法来改变它们的宽度，因为它们的值改变viceversa。

我试过onchangeoninput但它们只在用户手动点击字段并输入值时才起作用。

这里是我的代码

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';">

JAVASCRIPT

$('#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("") 
    } 
});

来源

2017-04-13 Julius

另一种解决方案是使用jQuery的width功能和处理您keyup事件的一切。这是一个有点难看，但应该给你的想法：

var field1OriginalWidth = $('#Field1').width(); 
 
var field2OriginalWidth = $('#Field2').width(); 
 

 
$('#Field1').keyup(function() { 
 
    field1Val = parseInt($(this).val()); 
 
    $(this).width(10 * $(this).val().toString().length); //Calculating the required width based on input length 
 

 
    if (field1Val) { 
 
    field2Val = field1Val; 
 
    $('#Field2').val(field2Val.toFixed(8)); 
 
    $('#Field2').width($(this).width()) //Set the other Field's width 
 
    } else { 
 
    $('#Field2').val("") 
 
    $('#Field1').width(field1OriginalWidth); 
 
    $('#Field2').width(field2OriginalWidth); //Reset both fields to some original width 
 
    } 
 
}); 
 

 
$('#Field2').keyup(function() { 
 

 
    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()) 
 
    } else { 
 
    $('#Field1').val(""); 
 
    $('#Field1').width(field1OriginalWidth); 
 
    $('#Field1').width(field1OriginalWidth); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="text-align:center;min-width:2px;width:100px" id="Field1" type="text"> 
 

 
<input style="text-align:center;min-width:2px;width:100px" id="Field2" type="text">

来源

2017-04-13 11:18:52 jrook

尝试使用oninput事件。当数据放入输入元素时，它总是触发（如果您不介意忽略IE 8及更低版本）。

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

来源

2017-04-13 10:55:25 Benjamin

动态输入字段宽度调整大小

回答

相关问题