javascript - 如何触发按钮打开用户输入/文本框

Question

所以我正在尝试创建“看板/待办事项列表”网站，但我在触发添加按钮时遇到了问题。我试图触发“添加”按钮以打开用户输入框。所以我有这个创建一个小框的“添加”按钮。但我无法弄清楚如何在该框中添加一个小区域，我可以在其中编写任何类型的文本。

我做了很多研究，但没有人在制作相同类型的待办事项列表应用程序。

div class="board">
    <div class="board-column todo">
            <button type="button" class="btn" onclick="addEvent()">+</button>
            <div class="board-column-header">To do</div>
            <div class="board-column-content"></div>


.btn {
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    display:block;
    width:30px;
    height:30px;
    line-height:25px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #4A9FF9;
    text-align:center;
    box-shadow: 0 0 3px rgba(92, 92, 92, 0.2);
    font-size:20px;
    cursor: pointer;

忘记说了。在这个特定的框中，我想要那个输入/文本框

    board-item-content {
        position: relative;
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 1px 1px 5px 0 rgba(92, 92, 92, 0.2);
    } 

Answer 1

您可以使用 jquery/javascript 做类似的事情

注意:这是一个小想法示例，您可以根据需要进行更改。

function addEvent() {
var html = "<input type='text' name='box'>";
$('.board-column-content').append(html);

}

.btn {
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    display:block;
    width:30px;
    height:30px;
    line-height:25px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #4A9FF9;
    text-align:center;
    box-shadow: 0 0 3px rgba(92, 92, 92, 0.2);
    font-size:20px;
    cursor: pointer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="board-column todo">
            <button type="button" class="btn" onclick="addEvent()">+</button>
            <div class="board-column-header">To do</div>
            <div class="board-column-content"></div>