2

Как вывести текст из input в другой блок или параграф ?

1

5 ответов 5

5

$('.pole').keyup(function() {
  var val = $('.pole').val();//Получаем данные из input
  $('.txt').html(val);//Вставляем значение в тег с классом txt
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="pole" type="text">
<p class="txt"></p>

4
  • а то это типа фишка в vue :))
    – user33274
    25 июн 2018 в 8:19
  • vue? вы не указали в задание про vue. Метки js и jquery 25 июн 2018 в 8:20
  • нет ! вы не поняли меня -я не автор вопроса , просто vue постоянно это везде показывает типа это такая фишка ... + от меня
    – user33274
    25 июн 2018 в 8:21
  • @Максим Ленский, да, точно, не вы автор, сорри)) 25 июн 2018 в 8:22
3

Вот решение на чистом JS

function input() {
  var input_taker = document.getElementById('input').value;
  document.getElementById('block').innerHTML = input_taker;
}
<input type="text" id="input" onkeyup="input()">
<p id="block"></p>

3

Как вывести текст из input в другой блок или параграф ?

var input = document.querySelector('input')
// Вешаем обработчик события на инпут
input.addEventListener('keyup', function(e) {
  // Выбираем р
  var p = document.querySelector('.res')
  p.textContent = e.target.value
})
<input type="text" name="w">
<p class='res'>
<!-------- Выводим -------->
</p>

П.С. Для полного набора в коллекцию

2

Еще есть такой вариант!

$('.pole').on('input', function() {
  var val = $('.pole').val();//Получаем данные из input
  $('.txt').html(val);//Вставляем значение в тег с классом txt
$('.txt').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="pole" type="text">
<p class="txt"></p>
<a class="txt"></a><br>
<span class="txt"></span><br>
<input type="text" class="txt">

2
  • Это больше похоже на фишку Vue.js 25 июн 2018 в 9:55
  • Единственный ответ, где событие input, а не keyup. Плюс от меня) 25 июн 2018 в 12:33
2

Тег output определяет область в которую выводится информация

Похоже последний вариант для коллекции:

<form oninput="result.value=text.value">
  <p><input type="text" name="text" autofocus></p>
  <p><output name="result"></output></p>
</form>

1
  • 1
    Очень хорошее решение, простое и доступное. Я бы до такого не додумался. Спасибо !
    – nazz fardo
    26 июн 2018 в 8:08

Ваш ответ

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

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