Требуется двойной щелчок для редактирования в форме Bootstrap. Jquery? - PullRequest
Новая
       1

Требуется двойной щелчок для редактирования в форме Bootstrap. Jquery?

0 голосов
/ 29 января 2020

Моя цель - сделать так, чтобы конечный пользователь дважды щелкнул красную область, чтобы редактировать текст, и щелкнул по кнопке сохранения, чтобы остановить функцию редактирования.

Я изучаю, как это сделать. Однако мне не очень повезло. Я смотрю на это неправильно или ответ легче, чем я делаю?

Я прошел bootstrap документы, не найдя там ничего. Я также искал горячий, чтобы сделать двойной щелчок, чтобы отредактировать, не повезло с этим. 

$( ".am9Input" ).dblclick(function() {
  });
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="https://code.jquery.com/jquery-3.4.1.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 -->
     
      <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 am9Input" type="text" placeholder="Default input">
        </div>
        <div class="col-2 saveBtn">
          <button type="submit" class="btn btn-primary mb-2 am9Button">Save</button>
       </div>
      </div>
    </div> 
    
   
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="script.js"></script>

  </body>
</html>

1 Ответ

1 голос
/ 29 января 2020

Этого можно добиться, прослушав double_clicks на элементе ввода и clicks на кнопке. Измените строку <input class="border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input"> ---> <input class="border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input" readonly>, а также отредактируйте файл script.js, добавив приведенный ниже фрагмент кода, и это должно помочь. 

$( ".am9Input" ).dblclick(function() {
	$(".am9Input").attr("readonly", false); 
 });

$( ".am9Button" ).click(function() {
	$(".am9Input").val(""); 
	$(".am9Input").attr("readonly", true); 
 });

Кроме того, в качестве комментария я предлагаю использовать идентификаторы, а не классы, для идентификации элементов на вашей странице, имеющих события кликов, которые могут вызвать проблемы, если вы продолжите использовать классы. для этой конкретной цели c. Вы можете прочитать о Классы против идентификаторов здесь , если вам интересно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...