動態輸入字段寬度調整大小

我有兩個字段，當數字輸入到它們中的任何一個時，它們都會相互改變數值。動態輸入字段寬度調整大小

我需要一種方法來改變它們的寬度，因爲它們的值改變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

動態輸入字段寬度調整大小

回答

相關問題