Wie man Breite und Höhe dynamisch mit Nivellierung ändert

Question

Ich habe einige Probleme konfrontiert. Wenn ich Text in ein Eingabefeld schreibe, wird beim Schreiben von Text ein weiteres Textfeld angezeigt. Eine weiteres Textfeld Breite und Höhe nicht dynamisch mit Nivellierung wie unten Bild und Demo-Site

My Demo Site

Standardbreite und -höhe

Wechsel Aber Ich will l IKE Diese gewünschte Ausgangs Desired Output Link

Für gewünschte Ausgangseingangs wie diese und Demo Site

I ein weiteres Problem Höhe oberen gezeigt ist der Box konfrontiert . Aber die Höhe sollte linke oder rechte Position der Box zeigen.

Inneres Loch der Box ist ein anderes Problem, das ich meine Box nicht einschließen.

Und das letzte Problem ist, fügen Sie keine Nivellierung Ende Pfeil der Nivellierungslinie. Mein Code ist unten

Für Eingabetext

<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> 

für Breite und Höhe

</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> 

ändern Breite und Höhe auswählen

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

} 

Mein OutPut Feldbox Breite, Höhe und Ausgang Textcode ist unter

<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> 

Wert meines Ausgabefeld hinzufügen

<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

Basierend auf Ihrem Kommentar Bemerkung oben, hier ist, was Sie in reinem CSS suchen. Da das von Ihnen geforderte Bild das Bild in mm benötigte, habe ich versucht, das richtige Verhältnis mit px beizubehalten. Es liegt jedoch an Ihnen, die Werte so anzupassen, wie Sie es für geeignet halten, um die erzeugten Ergebnisse zu erhalten.

Alles, was Sie brauchen, ist ein div und der folgende Stil. Um die "Löcher" vorzutäuschen, habe ich eine Hintergrundfarbe auf den Körper aufgetragen und die gleiche Farbe verwendet, um die Pseudoelemente :before und :after zu färben.

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; 
} 

Hier ist eine funktionierende Geige. https://jsfiddle.net/s6r6frgx/2/