レベリングで幅と高さを動的に変更する方法

Question

私はいくつかの問題に直面しています。入力フィールドにテキストを書き込むと、テキストを書き込むと別のテキストが表示されます。別のテキストフィールドの幅と高さが

My Demo Site

画像とデモサイト以下のように平準化して、動的に変化していないデフォルトの幅と高さ

しかし、私はlが欲しいIKEこの所望の出力Iは、別の問題高さがボックスの上部に示される直面しているこれらおよびデモサイト

ような所望の出力入力について Desired Output Link

。しかし、高さにはボックスの左右の位置が表示されます。

ボックスの内側の穴は、私がボックスを含まないという別の問題です。

最後に、レベリングラインのレベリング終了矢印を追加しないでください。私のコードは

</div> 

<h2 class="shape_text_width">WIDTH:</h2> 
<div class="iteam_icon2"> 

<input type="text" id="width" name="width" value="79" onchange="XX()"><p class="mili1">mm</p</input> 

</div> 
<h2 class="shape_text_width">HEIGHT:</h2> 
<div class="iteam_icon2"> 

    <input type="text" id="height" name="height" value="26" onchange="XX1()"><p class="mili1">mm</p></input> 

</div> 

変化幅と高さ

$("#width_label").text(79 + " mm"); 
$("#height_label").text(26 + " mm"); 

function XX() 
{ 
    var first2 =document.getElementById("width").value; 
     var width=first2; 
     var width_in_px=width*3.779527559; 
     var total_width = Math.round(width_in_px); 
     var f_width_in_px = parseInt(total_width); 

     var mm_text="mm"; 

     $('#mySVG1').css("width", f_width_in_px + "px"); 
     $('#shape1').css("width", f_width_in_px + "px"); 
     $("#width_label").text(width + " mm"); 
     $('#width_label').css("width", f_width_in_px + "px"); 

     var dif=width-300; 
     if(width>300) 
     { 
     $('#height_label').css("margin-right", dif + "px"); 
     } 

} 

function XX1() 
{ 
    var first22 =document.getElementById("height").value; 


     var height=first22; 
     var height_in_px=height*3.779527559; 
     var total_height = Math.round(height_in_px); 
     var f_height_in_px = parseInt(total_height); 

     $('#mySVG1').css("height", f_height_in_px + "px"); 
     $('#shape1').css("height", f_height_in_px + "px"); 
     $("#height_label").text(height + " mm"); 
     $('#height_label').css("width", f_height_in_px + "px"); 

} 

私の出力フィールドボックスの幅、高さ、および出力を選択し、幅と高さのために、入力されたテキスト

<div class="text_input1"> 
    <p class="label1"> Text 1 <input class="input_box1" type="text" id="text11" name="text11" value="Enter Text1"></p> 
</div> 

<div class="text_input1"> 
<p class="label1"> Text 2 <input class="input_box1" type="text" id="text22" name="text22" value="Enter Text2"></p> 
</div> 

<div class="text_input1"> 
<p class="label1"> Text 3 <input class="input_box1" type="text" id="text33" name="text33" value="Enter Text3"></p> 
</div> 

について

を下回っていますテキストコードは

です

<div class="label_fix" id="height_label" style="border-bottom: 1px solid #000; 
    width:100px; 
    margin: 0 auto; 
    margin-bottom: 5px; 
    padding: 2px;"> 
</div> 

<svg style="width:300px;height:100px" id="mySVG1"> 
    <rect id="shape1" x="0" y="0" style="width:300px;height:100px" stroke="black" stroke-width="1px" fill="white"/> 
    <<text id="text1" x="50%" y="25%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
    <<text id="text2" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
    <<text id="text3" x="50%" y="75%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 

</svg> 

<div class="label_fix" id="width_label" style="border-top: 1px solid #000; 
    width: 300px; 
    margin: 0 auto; 
    margin-top: 5px; 
    padding: 2px;"> 
</div> 

値以上のコメントの発言に基づいて、私の出力フィールドに

<script> 
$("#text11") 
    .keyup(function(test1) { 
    var value = $(this).val(); 
    $("#text1").text(value); 
    $("#text_second_1").text(value); 
    $("#text_third_1").text(value); 

    }) 
</script> 
<script> 
$("#text22") 
    .keyup(function(test2) { 
    var value = $(this).val(); 
    $("#text2").text(value); 
    $("#text_second_2").text(value); 
    $("#text_third_2").text(value); 

    }) 
</script> 
<script> 
$("#text33") 
    .keyup(function(test3) { 
    var value = $(this).val(); 
    $("#text3").text(value); 
    $("#text_second_3").text(value); 
    $("#text_third_3").text(value); 

    }) 
</script> 

Answer 1

を追加し、ここにあなたが純粋なCSSの後に探しているものです。あなたが要求したものはmm単位である必要があったので、pxを使って正しい比率を維持しようとしましたが、結果を得るためには値を調整する必要があります。

あなたが必要とするのは、divと次のスタイルです。 「穴」を偽装するために、身体に背景色を適用し、:beforeと:after疑似要素を同じ色で色付けしました。

body { 
    background:#ccc; 
} 
.box { 
    box-sizing:border-box; 
    background:#fff; 
    width:99px; 
    border-radius:5px; 
    text-align:center; 
    padding:7px 0; 
    position:relative; 
    border:1px solid #000; 
    font-size:14px; 
} 
.box:before, 
.box:after{ 
    content:""; 
    position:absolute; 
    left:5px; 
    display:block; 
    width:8px; 
    height:8px; 
    background:#ccc; 
    border-radius:50%; 
    top:50%; 
    margin-top:-5px; 
    border:1px solid #000; 
} 
.box:after { 
    left:auto; 
    right:5px; 
} 

ここでは動作中のフィドルです。 https://jsfiddle.net/s6r6frgx/2/