如何通过在最近使用的文本框中的光标处单击按钮来插入文本？

Question

我有一个带有多个文本框和一组按钮的表单。使用下面的 Javascript，我可以单击一个按钮并将文本插入到其中一个命名框中。

单击按钮时，是否可以将文本插入到最近的/活动的文本框中？

目前我有这个，但它使用的是文本框的特定 ID，而不是最近使用/活动的 ID；

   $( 'input[type=button]' ).on('click', function(){
      var cursorPos = $('#my_text_box').prop('selectionStart');
      var v = $('#my_text_box').val();
      var textBefore = v.substring(0,  cursorPos );
      var textAfter  = v.substring( cursorPos, v.length );
      $('#my_text_box').val( textBefore+ $(this).val() +textAfter );
    });

更清晰的 JSFiddle 示例；

http://jsfiddle.net/bd1xf0sj/1/

这个想法取决于单击按钮时您所在的文本框，而不是使用某个文本框的 ID。这个想法是可以单击按钮并且可以使用任何文本框。

Answer 1

您可以创建一个变量来存储最近的文本框，并在文本框聚焦时更新它，如下所示：

let currentInput = $('#text1');
$(document).on('focus', 'textarea', function() {
  currentInput = $(this);
})

然后使用这个变量来更新文本，就像你对你的#my_text_box：

$( 'input[type=button]' ).on('click', function(){
  let cursorPos = currentInput.prop('selectionStart');
  let v = currentInput.val();
  let textBefore = v.substring(0,  cursorPos );
  let textAfter  = v.substring( cursorPos, v.length );
  currentInput.val( textBefore + $(this).val() + textAfter );
});

小提琴

更新：一些修改以在插入文本后保留光标位置：

let currentInput = $('#text1');
$(document).on('focus', 'textarea', function() {
  currentInput = $(this);
})

$( 'input[type=button]' ).on('click', function(){
  let cursorPos = currentInput.prop('selectionStart');
  let v = currentInput.val();
  let textBefore = v.substring(0,  cursorPos );
  let textAfter  = v.substring( cursorPos, v.length );
  currentInput.val( textBefore + $(this).val() + textAfter );
});

Answer 2

挂钩表单事件以将最近的输入标记为“最近”（使用某些类）并取消标记所有其他输入。单击修改“最近”输入。

您很可能需要onfocus，但可能onchange取决于您的具体用例。