我希望我的第二个文本区域标记仅用于输出文本而不是用于输入，但我也不知道如何，我尝试将类型设置为“输出”，但不幸的是这不起作用。感谢您花时间阅读本文，请查找下面的代码。我还想补充一点，我不知道为什么我的按钮位于文本区域下方，在我常用的网站上，按钮位于文本区域旁边。
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}body {
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.txt {
margin-right: 20px;
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
margin-top: 0px;
}
.text {
border: none;
margin-top: 15px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 24px;
resize: none;
}
.asci {
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.ascii {
margin-top: 15px;
margin-left: 10px;
height: 660px;
width: 564px;
outline: none;
font-size: 24px;
resize: none;
vertical-align: top;
border: none;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
margin-top: 0px;
margin-left: 0px;
font-size: 22px;
cursor: pointer;
}
::selection {
color: black;
background: lightblue;
}<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="alphabetical.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="ascii" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction()">
</form>
<script src="alphabetical.js"></script>
</body>
</html>将你的 teatarea 设为只读
<textarea readonly class="ascii" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>