I encountered some issues while working with input fields. Whenever I type text in one input field, the text seems to appear in another field as well. The width and height of the second text field do not adjust dynamically like in the provided image on the demo site.
Check out my Demo Site
The default width and height are as shown below:
https://i.sstatic.net/QB1Jd.jpg
https://i.sstatic.net/ypr6g.jpg
https://i.sstatic.net/QMZ90.jpg
However, I want the output to resemble the design on this desired output link: Desired Output Link
https://i.sstatic.net/qkfik.jpg
https://i.sstatic.net/SjJ3z.jpg
In order to achieve the desired output, the input should be structured similarly to these examples on the demo site:
https://i.sstatic.net/kNU9N.jpg
One issue I faced is that the height is displayed above the box instead of on the left or right side of it.
Another problem arises when there is an inner hole within the box, which I have not accounted for in my design.
Lastly, there is an issue where the leveling end arrow does not get added to the leveling line. Here is a snippet of my code:
For input text:
<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>
For adjusting width and height select:
</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>
To modify the width and height:
$( "#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");
}
The dimensions of my output field box and the output text code are outlined below:
<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>
To populate values into my output field:
<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>