css - 文本区域中的垂直对齐

标签 css textarea vertical-alignment

我有一个 4 行 20 列的文本区域。我希望光标从左下角开始。当我向文本区域写入内容时,文本会上升。我可以为此编写任何 css 代码吗?

最佳答案

这是一个简化的解决方案,适用于行数是静态的情况。该解决方案给人的印象是在隐藏输入字段时有一个文本区域元素(删除了每个文本输入周围的边框)。


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

关于css - 文本区域中的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59546229/

相关文章:

javascript - 扩展通过 AJAX 返回的 div

html - cdn 文件的链接不适用于 html

html - 如何从文本区域中删除自动换行?

html - 为什么具有相同字体大小、行高、填充和高度的文本区域和输入文本垂直对齐方式不同?

html - div 中的 CSS 垂直对齐按钮不起作用

html - 两个 div 在另一个 div 中的垂直对齐而不使用显示 :flex

html - 修复大小标签 "li"并减少粗体字号

jquery - 文本区域高度增加

css - 输入的文本导致 textarea 在表单提交后扩展到 div 之外

image - 鉴于我的代码情况,如何将图像置于 div 中?