个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 08:33:07 25 4
gpt4 key购买 nike

我正在尝试设置这个每日调度程序。我正在上午 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>

最佳答案

演示:jsFiddle DEMO

HTML

您需要的所有HTML

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

JavaScript

We'll use Window.localStorage to save the data so that the user can exit or refresh the page.

创建一个 24 小时到 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 将该字符串附加到 DOM 中，给定开始 from 和结束 to 小时:

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

现在是有趣的部分。
保存文本区域模糊!
通过单击文本区域外部(“保存”元素或其他任何位置)可以使文本区域变得模糊。所以它在任何情况下都适用。 (使用 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

<小时/>

为了完整起见，这是 SO 片段:

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>

关于javascript - 用于显示更新文本并保存按钮单击的文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59955480/

25 4 0
文章推荐： javascript - 使用 CSS 类进行验证时，jQuery 验证器不适用于复选框列表
文章推荐： jquery - 访问最接近匹配标签的id
文章推荐： php - jQuery 选择器捕获 php if 语句中的类
文章推荐： javascript - 不要让用户输入错误的数据 - 改进 IP 地址验证 JavaScript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com