Как использовать Javascript или ajax для ввода или добавления значения поля ввода в текстовое поле в режиме реального времени?

Question

У меня есть текстовое поле с идентификатором #image_tag_list_tokens, и текстовое поле выглядит следующим образом в форме изображения:

 = f.text_area :tag_list_tokens, label: "Tags (optional) ->", data: {load: @image_tags }, label: "Tags"

У меня есть поле ввода и кнопка следующим образом:

 <input type="text"  name="myNewTag" id="my_new_tag">
 <button name="meNewTagButton" type="button" id="createMy_new_tag">Create new tag</button>

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

 "old_tag1,old_tag2,'new_tag1','new_tag2'"

Answer 1

// add event listener for button click
$("#createMy_new_tag").on("click", function(){
  // get the text in the input
  var new_tag = $("#my_new_tag").val(),
  // grab the textarea
      textarea = $("#image_tag_list_tokens")
  // append the input to the current text
  textarea.val(textarea.val() + ", " + new_tag)
  // reset the input
  $("#my_new_tag").val("")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="image_tag_list_tokens">blah</textarea>
<input type="text" name="myNewTag" id="my_new_tag">
 <button name="meNewTagButton" type="button" id="createMy_new_tag">Create new tag</button>