Отображение всех изменений в (немедленно) с помощью jQuery

#javascript #html #jquery #ajax

#javascript #HTML #jquery #ajax

Вопрос:

Я работаю над проектом веб-сайта, который хочет отображать то, что мы редактируем в <input type="text" id="input" /> теге.

Но проблема в том, что результат отображается только в <div class="result"></div> .

Я хочу отобразить это в <input type="text" class="reult" /> и <textarea class="result"></textarea> .

Я много раз пытался это исправить. Я также создал для этого страницу codepen ..https://codepen.io/coderco/pen/abNNVyw . Пожалуйста, проверьте коды ниже.

 input[type=text],select,textarea{display:block;width:27em;color:#000!important;background:#fff!important;margin-top:1em;height:34px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px}
    textarea{display:block;width:27em;margin-top:4em;height:125px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px;color:#000!important;background:#fff!important;margin-bottom:10px}
    .result{margin-top:20px;width:20em;height:5em;float:left;font-family:arial;font-size:18px;background:#333;color:#fff;margin-right:1em;padding:10px}
<input type="text" id="input" placeholder="Edit Here" />

<div class="result"></div>
<div class="result"></div>

<textarea class="result" placeholder="Display Result Here"></textarea>
<input type="text" class="result" placeholder="Display Result Here"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script  src="js/script.js"></script>


// Choose relevant input elements
var inputs = $('input,select,textarea')
  // Bind a new event to the inputs
  .bind("newInput", function(){
    // Abbreviate
    var $t = $(this);
    // Log the results
    $('.result')
    .text( $t.val() );
  });
(function scan(){

  inputs.each(function() {
    $t = $(this);
    if ( $t.data('oldVal') !== $t.val() ) {
      $t.trigger('newInput');
      $t.data('oldVal',$t.val());
    }
  });
  setTimeout(scan,100);

})();

1. Что это значит: «отображение только в . Я хочу отобразить это в и » . ? Мне кажется, все работает…

2. Пожалуйста, обновите страницу. Что-то не появлялось в вопросе.

3. Я не вижу текстовой области в вашем HTML, и у вас нет <input type="text" class="reult" />

4. извините.. пожалуйста, проверьте в codepen codepen.io/coderco/pen/abNNVyw

Ответ №1:

Вы слишком все усложняете. Вот простой JS для задания.

Элемент Div не принимает значения параметра, он принимает inerHTML , и texatera и ввод принимает value .

 document.querySelector('#input').addEventListener('keyup', val, false);

function val() {
[...document.querySelectorAll('.result')].forEach(el => { 
  el.value=this.value;
  el.innerHTML=this.value;
  })
}

ПРИМЕР JS:

Показать фрагмент кода

 document.querySelector('#input').addEventListener('keyup', val, false);

function val() {
[...document.querySelectorAll('.result')].forEach(el => { 
  el.value=this.value;
  el.innerHTML=this.value;
  })
}

 input[type=text],
select,
textarea {
  display: block;
  width: 27em;
  margin-top: 4em;
  height: 34px;
  font-size: 1.2em;
  font-family: "sans-serif";
  border: 2px solid #000;
  padding: 2px 10px;
  font-family: arial;
  font-size: 18px;
}

.result {
  margin-top: 20px;
  width: 20em;
  height: 5em;
  float: left;
  font-family: arial;
  font-size: 18px;
  background: #333;
  color: #fff;
  margin-right: 1em;
  padding: 10px;
}

 <input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>

<textarea class="result"></textarea>
<input type="text" class="result" />

Если вы хотите сделать это в jQuery: вы должны использовать .text() or .html() для divs , и .val() для input и textarea

 $("#input").keyup(function(){
let inValue=$(this).val();
  $(".result").each(function(){
    $(this).text(inValue);
    $(this).val(inValue);
  });
});

ПРИМЕР jQuery:

Показать фрагмент кода

 $("#input").keyup(function(){
let inValue=$(this).val();
  $(".result").each(function(){
    $(this).text(inValue);
    $(this).val(inValue);
  });
});

 input[type=text],
select,
textarea {
  display: block;
  width: 27em;
  margin-top: 4em;
  height: 34px;
  font-size: 1.2em;
  font-family: "sans-serif";
  border: 2px solid #000;
  padding: 2px 10px;
  font-family: arial;
  font-size: 18px;
}

.result {
  margin-top: 20px;
  width: 20em;
  height: 5em;
  float: left;
  font-family: arial;
  font-size: 18px;
  background: #333;
  color: #fff;
  margin-right: 1em;
  padding: 10px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>

<textarea class="result"></textarea>
<input type="text" class="result" />