文本区域中的垂直对齐答案

【问题标题】：vertical alignment in textarea文本区域中的垂直对齐
【发布时间】：2019-12-31 16:00:04
【问题描述】：

我有一个 4 行 20 列的文本区域。我希望光标从左下角开始。当我在 textarea 中写一些东西时，文本会上升。有没有我可以为此编写的 css 代码？

【问题讨论】：

【解决方案1】：

如果行数是静态的，这是一个简化的解决方案。该解决方案给人的印象是在隐藏输入字段的同时拥有一个 textarea 元素（删除了每个文本输入周围的边框）。


    <head>
        <script>    
            function goUpOneRow( e, row ){
                if (e.keyCode == 13) {
                    document.getElementById( row ).focus();
                }               
            }
        </script>

        <style>
            #inputarea {
                border:1px solid #ccc;
                width:300px;
                height:150px;
            }

            #inputarea input {
                width:100%;
                height:25%;
                font-size:18px;
                border: 0;
                outline-width: 0;
            }
        </style>

    </head>

<body>
    <div id="inputarea">
      <div><input id="row1" type="text"> </div>
      <div><input id="row2" type="text" onKeyPress="goUpOneRow( event, 'row1' );"> </div>
      <div><input id="row3" type="text" onKeyPress="goUpOneRow( event, 'row2' );"> </div>
      <div><input id="row4" type="text" autofocus onKeyPress="goUpOneRow( event, 'row3' );"> </div>
    </div>
</body>

【讨论】：