CODEWITHSUNDEEP
javascripthtmlcss
Apython
Apython

Reputation: 453

How to place text in a specific location within a TextArea

I'm trying to place elements of an Array (Strings) within a TEXTAREA.

The background is seen as a lined notebook, so each element in the array (a name string) must be located nicely between the lines. Unfortunately, I can't seem to define the location using styling (using JS) in the TEXTAREA. I tried using:

textBox.style.top = '76pt';

but that doesn't work. It is stock on the top.

Using textBox.style.top is no good cause then the Textarea box itself moves - as well applying: textBox.style.position = 'absolute' or 'relative'.

If you look at my code, you'll see the following lines:

var points = 76; textBox.style.top = String(point) + 'pt'; points = points + 35;

that's because I want to automatize this pattern to be in the exact position between the lines regardless to the array's length.

The only way I managed to variate the location is using a new line ('\n') but that's not doing the right job (see the snippet version).

here is the simplified code:

#layout {
position: relative;
overflow: auto;
left: 225px;
width: 	800px;
height: 370px;
background-color: white;  
padding-left: 1px;
max-width:100%;
}

textarea {
width: 	800px;
height: 370px;
resize: none;
font-size: 45px;
font-family: Arial, Helvetica, Verdana;
background: url(https://qph.is.quoracdn.net/main-qimg-47327da6ae3e0b3727a9b9a7ea7f1adb?convert_to_webp=true);
}

#in_box{
position: absolute;
top: 76pt;
right: 10pt;
font-size: 30px;
font-family: Arial, Helvetica, Verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
    <head>
	<meta charset="utf-8"/>
    </head>
    <body>	
		<div id="layout">
		<textarea maxlength="200" readonly="readonly" id="myText" dir="auto" name="outtest" class = "fetchBox"></textarea> 
		<span id="in_box" class="fetch" name="testOutput"></span>
		</div>				
</body>
</html>
<script>
var textBox = document.getElementById('myText');
var myArr = ['Sparrow', 'Blackbird','Dove'];
var points = 76;
if(myArr.constructor === Array) {
	for(i=0; i < myArr.length; ++i) {
	textBox.value += '\n'+myArr[i]+'\n';
	textBox.style.fontSize = "30px";
	textBox.style.top = String(points) + 'pt';
	points = points + 35;
	}
}
</script>

I would very much appreciate your help!!!

Upvotes: 1

Views: 1287

Answers (2)

Aplet123
Aplet123

Reputation: 35512

If you add a line-height:22px;to your CSS in your textarea section, it should make the text line up.

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65806

You can't place content this way INSIDE of a textarea element as the interior is nothing more than a text field. Instead, you should look to using another content container that does allow for its interior to be styled, like a div.

Upvotes: 1

Related Questions