動的入力フィールド幅のサイズ変更

Question

いずれかのフィールドに数値を入力すると、値が変更される2つのフィールドがあります。

値が変更されると、幅を変更する必要があります。

私は試しましたが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("") 
    } 
}); 

Answer 1

別の解決策は、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">

Answer 2

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