Question

因此我试图创建“看板/待办事项列表”网站，并且无法触发添加按钮。我试图触发“添加”按钮以打开用户输入框。所以我有这个“添加”按钮，它创建了一个小盒子。但我不知道如何在该框中添加一个小区域来写任何类型的文本。

我已经做了很多reasearch，但是没有人制作相同类型的待办事项应用程序。

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>

Answer 2

function addEvent() {
  var txt;
  var task1 = prompt("Please enter your task:", "Task Name");
  if (task1 == null || task1 == "") {
    txt = "User cancelled the prompt.";
  } else {
    txt = "You have added : " + task1 + "as a task!";
  }
  document.getElementById("demo").innerHTML = txt;
}

.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;```

   <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>
            
            
            <p id="demo"></p>

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

2 个答案: