如何使用Javascript或ajax实时注入或添加文本字段中输入字段的值？

Question

我有一个id为#image_tag_list_tokens的text_field，文本字段在图像形式中显示如下：

 = 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>