时间戳

首页 > 解决方案 > 文本框显示更新的文本并在按钮单击时保存

javascript - 文本框显示更新的文本并在按钮单击时保存

问题描述

我正在尝试设置这个每日调度程序。我在上午 9 点的时段工作。我想要发生的是让该人单击时间右侧的框，进行文本输入，然后单击保存按钮以保存文本并在该时间段中显示。

我是否能够仅使用 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>

标签： javascriptjqueryhtmlcsstwitter-bootstrap

解决方案

演示：jsFiddle 演示

HTML

您需要的所有HTML

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

JavaScript

我们将用于Window.localStorage保存数据，以便用户可以退出或刷新页面。

创建一个24 小时到 AM/PM转换器：

const ampm = h => (h%12||12)+(h<12?'AM':'PM');

使用Window.localStorageLS在浏览器内存中读取（和存储）您的对象。

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和结束时间将该字符串附加到 DOM 中to：

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

现在有趣的部分。
节省文本区域模糊！
可以通过单击文本区域之外的“保存”元素或其他任何位置来模糊文本区域。所以它适用于任何情况。（使用 CSS和相邻的兄弟组合器显示透明的“SAVE”文本）:focus+

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

为了完整起见，这是 SO-Snippet：

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>

推荐阅读