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

Posted 2023-05-09

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

【英文标题】：How do I a use Javascript or ajax to inject or add a the value of an input field in a textfield in real time?

【发布时间】：2016-12-26 02:11:10

【问题描述】：

我有一个 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'"

【问题讨论】：

仅供参考 - 如果您发布渲染的 html 而不是 rails .erb 模板，通常会更有帮助:)

【参考方案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>