我有一个 x 矩阵形式，其中包含垂直而不是通常水平的文本区域。当用户在文本区域中输入信息时，我想让列自动调整，但到目前为止我找到的所有示例都只适用于普通文本区域。我真的不明白文本区域是如何调整大小的，以及垂直如何影响这些调整大小的问题。我希望列随文本区域扩展，但文本区域不应自行调整。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="colResize.min.js"></script>
<meta charset="utf-8" />
<title></title>
<style>
.x-matrix {
font-family: Arial;
font-size: medium;
border-style: none;
border-collapse: collapse;
}
.container{
position: relative;
font-family: Arial;
height:480px;
width:816px;
}
.v-text {
position: absolute;
transform: rotate(270deg);
transform-origin: 50% 50%;
border: none;
font-family: Arial;
}
.h-text{
width:600px;
}
.harvey {
width:50px;
text-align: center;
}
.top-row {
height: 50px;
}
.bottom-row {
height: 500px;
}
td {
border:solid;
border-width:1px;
border-collapse:collapse;
}
</style>
</head>
<body>
<div class="container">
<table id="main" class="x-matrix">
<tr class="top-row" id="top">
<td id="h-gi-1-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-1" class="h-text">Enter Intiative 1 here</td>
<td id="h-it-1-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr>
<tr class="top-row" id="top">
<td id="h-gi-2-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-2" class="h-text">Enter Intiative 2 here</td>
<td id="h-it-1-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-3-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-3" class="h-text">Enter Intiative 3 here</td>
<td id="h-it-1-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-4-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-4" class="h-text">Enter Intiative 4 here</td>
<td id="h-it-1-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-5-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-5" class="h-text">Enter Intiative5 here</td>
<td id="h-it-1-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr>
<tr class=bottom-row>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<!-- http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container-->
<div id="containerId">
<svg
id="svgId"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 500 600"
preserveAspectRatio="none">
<style>
.caption { font: bold 20px sans-serif; fill: #bd1c1c; }
</style>
<line x1="0" y1="0" x2="500" y2="600" stroke="black" />
<line x1="0" y1="600" x2="500" y2="0" stroke="black" />
<text id="top_caption" class="caption" x="150" y="20" transform="rotate (0 0,0)">Strategic Initiatives</text>
<text id="left_caption" class="caption" x="200" y="20" transform="rotate (270 300,300)">Strategic Goals</text>
<text id="right_caption" class="caption" x="150" y="20" transform="rotate (270 500,30)">Strategic Targets</text>
</svg>
</div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<textarea id="g-1" rows = "2" cols="65" class="v-text" style="bottom :-30px; left:-220px">Goal 1. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-2" rows = "2" cols="65" class="v-text" style="bottom :-30px; left:-176px">Goal 2. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-3" rows = "2" cols="65" class="v-text" style="bottom :-30px; left:-133px">Goal 3. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-4" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: -96px">Goal 4. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-5" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: -54px">Goal 5. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-1" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 392px">Target 1. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-2" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 435px">Target 2. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-3" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 475px">Target 3. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-4" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 517px">Target 4. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-5" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 558px">Target 5. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
</div>
</body>
</html>
最佳答案
我认为你的结构是错误的。请参见下面的示例。希望有所帮助。
function autochange(elem){
setTimeout(function(){
elem.style.cssText = 'height:auto;';
elem.style.cssText = 'height:' + elem.scrollHeight + 'px;';
},0);
}.container{
margin: 50px;
height: 500px;
width: 500px;
}
.v-text {
position: absolute;
transform: rotate(270deg);transform-origin: 50% 50%;
border: none;
font-family: Arial;
}
textarea{
overflow:hidden;
border: 1px solid;
}<div class="container v-text">
<textarea onkeydown='autochange(this);' id="t-1" rows = "2" cols="65">Vertical textarea by automatic resizing.</textarea>
<textarea onkeydown='autochange(this);' id="t-5" rows = "2" cols="65">Vertical textarea by automatic resizing.</textarea>
<textarea onkeydown='autochange(this);' id="t-5" rows = "2" cols="65">Vertical textarea by automatic resizing.</textarea>
<textarea onkeydown='autochange(this);' id="t-5" rows = "2" cols="65">Vertical textarea by automatic resizing.</textarea>
<textarea onkeydown='autochange(this);' id="t-5" rows = "2" cols="65">Vertical textarea by automatic resizing.</textarea>
</div>关于javascript - 处理垂直文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55130014/