javascript - 使 CSS 输入像表格单元格一样

Question

这是我想要实现的目标:demo

.editable-field {
    display: block;
    justify-content: inherit;
    width:100%;
    height:100%;
}
.editable-input {
    border: none;
    font-size: inherit;
    background: inherit;
    color: inherit;
    transition: 0.3s all linear;
    width:100%
    height:100%;
}

即使宽度和高度为 100%，输入似乎也不会沿着单元格延伸。

如果文本很长(这正是我想要的)，我有一个表格，其中的单元格会垂直展开。问题是，如果我想拥有可编辑的单元格(例如演示中的第三个单元格)，输入是静态的并且不会随着文本“增长”。是否有仅 css 的方法或 J-Query 来解决这个问题？

Answer 1

以下解决方案可能适合您。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<div class="container">
    <table>
        <tr>
            <td>Not Editable but very long and takes fffffffffffffff multiple lines</td>
        </tr>
        <tr>
            <td>Not Editable</td>
        </tr>
        <td contenteditable >            
               asdfad
        </td>
        <tr>
            <td>Not Editable</td>
        </tr>
    </table>
</div>

我使用了contenteditable。这是 html5 特性。