文本框显示更新的文本并单击保存并保存

问题描述 投票:0回答:1

我正在尝试设置此每日计划程序。我正在9am时段工作。我要发生的事情是该人单击时间右侧的框,输入文本,然后单击“保存”按钮以保存文本并将其显示在该时隙中。

我是否可以仅使用HTML来实现这一目标,还是需要实现JS才能使它正常工作?

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea{
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description{
  white-space: pre-wrap;
}

.time-block{
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}

.gray {
  background-color: gray;
}
.red {
  background-color: red;

}
.green{
  background-color: green;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="libs/moment.min.js"></script>  
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>

  <div class="container">

    <!-- Timeblocks go here -->
   
    <!-- 9am -->
   <div class="row">
      <div class='col-2 hour'> 9am
      </div>
      <div class="col-8 description red border-bottom">
        <input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" class="btn btn-primary mb-2">Save</button>
     </div>
    </div>
 
 


    <!-- 10am -->
    <div class="row">
        <div class='col-2 hour'> 10am
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>

      <!-- 11am -->
    <div class="row">
        <div class='col-2 hour'> 11am
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>
    
      <!-- 12am -->
      <div class="row">
          <div class='col-2 hour'> 12pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
      
    <!-- 1pm -->
    <div class="row">
        <div class='col-2 hour'> 1pm
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>
    
      <!-- 2pm -->
      <div class="row">
          <div class='col-2 hour'> 2pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
  
        <!-- 3pm -->
      <div class="row">
          <div class='col-2 hour'> 3pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
      
        <!-- 4pm -->
        <div class="row">
            <div class='col-2 hour'> 4pm
            </div>
            <div class="col-8 description red">
            </div>
            <div class="col-2 saveBtn">
            </div>
          </div>

           <!-- 5pm -->
        <div class="row">
            <div class='col-2 hour'> 5pm
            </div>
            <div class="col-8 description red">
            </div>
            <div class="col-2 saveBtn">
            </div>
          </div>


</body>

</html>
javascript jquery html css twitter-bootstrap
1个回答
0
投票

您需要的所有HTML

<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>

[[JavaScript部分

创建一个

24h至AM / PM

转换器:const ampm = h => (h%12||12)+(h<12?'AM':'PM');
使用

Window.localStorage读取(并存储)您的LS对象

在浏览器内存中。 const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object
创建并存储

HTML模板

作为JS字符串const template_schedule = h => `<div class="Schedule"> <div class="Schedule-time">${ampm(h)}</div> <textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea> <div class="Schedule-save">SAVE</div> </div>`;
并在给定开始时间Element.insertAdjacentHTML和结束时间from小时的情况下,使用to将字符串附加到DOM中:

for (let h=from; h<=to; h++) { EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h)) }

现在是有趣的部分。

textarea模糊

上的保存!可以通过在文本区域之外单击“保存”元素或其他任何位置来使文本区域模糊。因此,它将在任何情况下都有效。 (通过使用CSS :focus和相邻的同级组合器+显示透明的“ SAVE”文本)const save = ev => { const h = ev.target.getAttribute('data-h'); // Get the hour LS[h] = ev.target.value; // Update Object localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string }; EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => { el.addEventListener('blur', save); });
实时示例:

由于StackOverflow沙盒,实时代码段iframe和localStorage将不起作用-转到此jsFiddle DEMO

const from = 9; // use 24h format here const to = 17; // use 24h format here // Use window.localStorage to retrieve and store your data object as string const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object const EL_scheduler = document.querySelector('.Scheduler'); const ampm = h => (h%12||12)+(h<12?'AM':'PM'); const template_schedule = h => `<div class="Schedule"> <div class="Schedule-time">${ampm(h)}</div> <textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea> <div class="Schedule-save">SAVE</div> </div>`; // Populate Scheduler for (let h=from; h<=to; h++) { EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h)) } // Logic to save the data: // On textarea blur Event - save the data by reading the data-h value const save = ev => { const h = ev.target.getAttribute('data-h'); // Get the hour LS[h] = ev.target.value; // Update Object localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string }; EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => { el.addEventListener('blur', save); });
/*QuickReset*/ *{margin:0;box-sizing:border-box;}

body {font: 16px/1.4 sans-serif; color:#555;}
h1, h3 {text-align:center; font-weight:300;}

.Scheduler {
  width: calc(100% - 40px);
  max-width: 500px;
  margin: 1em auto;
}
.Schedule {
  border-top: 1px dashed #aaa;
  display: flex;
  padding: 2px 0;
}
.Schedule > *{
  padding: 0.5em 0.8em;
}
.Schedule-time {
  width: 70px;
  text-align: right;
}
.Schedule-desc {
  flex: 1;
  font: inherit;
  min-height: 70px;
  resize: vertical;
  background: #eee;
  border: none;
  border-right: 1px solid #555;
}
.Schedule-desc:focus {
  outline: none;
  background: #cbe8ef;
}
.Schedule-desc:focus+.Schedule-save{
  color: #fff; /* Show the SAVE text on textarea :focus */
}
.Schedule-save {
  color: transparent;
  background: #06AED5;
  border-radius: 0 1em 1em 0;
  display: flex;
  align-items: center;
  user-select: none;
}
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
© www.soinside.com 2019 - 2024. All rights reserved.