1

Бодрого вечера, подскажите, пожалуйста, какие использовать методы, чтобы по клику на плюсик или на Enter забирать значение из <input> и добавлять его, например, в <span> ниже. Накидал пример, чтобы было понятнее.

// module__account-note

(function() {

var add = $('.jsPlus'),
    input = $('.jsInput');

    add.click(function(){

    });

})();
1
  • Получить значение поля ввода можно с помощью метода text, а добавить в спан с помощью метода append
    – diralik
    10 июн 2017 в 20:41

3 ответа 3

2

Все очень просто.

    $('#plus').on('click', function(){
    $('#p').html($('#price').val());
});

А вот, собственно, и демонстрация https://jsfiddle.net/h3a1d7qr/

1

Полный функциональный пример и никакого jQuery (найс верстка кстати):

var addNote = document.querySelector(".module__account-note__str-3");

var input = document.querySelector(".jsInput");

var noteContainer = document.querySelector(".module__account-note__container");

function addTextNoteFromInput() {
  var value = input.value;
  if (value.trim().length < 1) {
    alert("Длина заметки слишком короткая");
  } else {
    var child = document.createElement("span");
    child.setAttribute("class", "module__account-note__str-4");
    child.innerText = value;
    noteContainer.appendChild(document.createElement("br"));
    noteContainer.appendChild(child);
  }
}

function pressEnter(event) {
  if (event.keyCode === 13) {
    addTextNoteFromInput();
  }
}

addNote.addEventListener("click", addTextNoteFromInput, false);

window.addEventListener("keydown", pressEnter, false);
input[type='text'],
textarea,
select {
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input,
textarea {
  font-family: 'helveticaneuecyr-roman-webfont';
  font-size: 14px;
  margin: 0;
  padding: 10px 10px;
  -webkit-transition: ease-in-out .2s;
  -moz-transition: ease-in-out .2s;
  -ms-transition: ease-in-out .2s;
  -o-transition: ease-in-out .2s;
  transition: ease-in-out .2s;
  color: #242424;
  border: none;
  border: 1px solid #5d5d5d;
  border-radius: 0;
  background: transparent;
}

.module__account-note {
  height: 550px;
  margin-top: 30px;
  padding: 40px 38px;
  background: #2c2c2c;
}

.jsPlus {
  color: white;
}

.module__account-note__str {
  font-size: 16px;
  display: block;
  padding-bottom: 20px;
  text-transform: uppercase;
  color: #ffc215;
  border-bottom: 1px solid #1d1d1d;
}

.module__account-note__row {
  padding: 18px 0;
  border-bottom: 1px solid #1d1d1d;
}

.module__account-note__str-3 {
  font-size: 20px;
  cursor: pointer;
}

.module__account-note__str-2 {
  width: 200px;
  padding: 0;
  color: #797979;
  border: none;
}

.module__account-note__str-4 {
  margin: 20px 0;
  color: #fff;
}
<div class="module__account-side__bottom">
  <div class="module__account-note">
    <span class="module__account-note__str">БЛОКНОТ</span>
    <div class="module__account-note__row row between">
      <input class="jsInput module__account-note__str-2" type="text" placeholder="Оставить заметку" />
      <span class="module__account-note__str-3 jsPlus">+</span>
    </div>
    <div class="module__account-note__container">
      <span class="module__account-note__str-4">Lorem Ipsum - это текст-"рыба"</span>
    </div>
  </div>
</div>

0

Используй метод .val(), чтобы получить доступ к значению <input>, и затем просто добавь это в качестве текста в нужный тебе элемент

(function() {

    var add = $('.jsPlus'),
        input = $('.jsInput');

        add.click(function(){
           $('yourElement').text(input.val());
        });

})();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.