Question

我正在尝试将一个数组（字符串）的元素放在TEXTAREA中。

背景被视为带衬里的笔记本，因此数组中的每个元素（名称字符串）必须恰好位于行之间。不幸的是，我似乎无法在TEXTAREA中使用样式（使用JS）定义位置。我尝试使用：

textBox.style.top = '76pt';

但这不起作用。它是顶部的股票。

使用 textBox.style.top 是没有道理的，然后Textarea框本身会移动 - 以及应用： textBox.style.position ='绝对'或 '相对'即可。

如果查看我的代码，您会看到以下几行：

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

那是因为我希望自动化这个模式，使其处于行之间的确切位置，而不管数组的长度如何。

我设法改变位置的唯一方法是使用新行（'\ n'），但是没有做正确的工作（请参阅代码段版本）。

这是简化的代码：

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

我非常感谢你的帮助!!!

Answer 1

您不能以这种方式将内容放置在textarea元素的内部，因为内部只不过是文本字段。相反，您应该使用另一个允许对其内部进行样式设置的内容容器，例如div。

Answer 2

如果您在textarea部分的CSS中添加True，则应该将文字排成一行。

如何在TextArea

2 个答案: