如何通过在最近使用的文本框中的光标处单击按钮来插入文本? [英] How can I insert text via button click at the cursor in the most recent textbox used?

问题描述

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

I have a form with multiple text boxes and a set of buttons. Using the Javascript below, I am able to click a button and insert text into one of the named boxes.

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

Is it possible to insert text into the most recent/active textbox when a button is clicked?

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

Currently I have this, but it's using the specific ID of a text box, rather than the most recently used/active one;

   $( '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 上的示例更清晰；

Example on JSFiddle for more clarity;

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

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

The idea being that depending upon which text box you're in when the button is clicked, instead of using the ID of a certain textbox. The idea being that the buttons can be clicked and any textbox can be used.

推荐答案

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

You can create a variable to store the most recent textbox and update it whenever a textbox is focused like this:

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

然后使用此变量来更新文本，就像您使用 #my_text_box 所做的一样:

Then use this variable to update text just like you're doing with your #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 );
});

小提琴

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

Update: Some modification to preserve the cursor position after insert text:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <textarea id="text1" cols="40" rows="3"></textarea>
    <textarea id="text2" cols="40" rows="3"></textarea>
    <textarea id="text3" cols="40" rows="3"></textarea>
    <textarea id="text4" cols="40" rows="3"></textarea>
    <br>
    <input type="button" value="one" />
    <input type="button" value="two" />
    <input type="button" value="three" />
</form>

这篇关于如何通过在最近使用的文本框中的光标处单击按钮来插入文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！