Javascript 또는 ajax를 사용하여 입력 필드의 값을 텍스트 필드에 실시간으로 주입하거나 추가하는 방법은 무엇입니까?

Question

I는 아이디 #image_tag_list_tokens의 text_field이 화상 형태로 다음과 같이 텍스트 필드가 표시 :

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

때 사용자 유형을 다음과 같이

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

는 I는 입력 필드와 버튼이 입력 필드에 새 태그를 추가하고 해당 새 태그를 가져 와서 태그 영역 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>