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

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 );
});

小提琴

更新：插入文本后保留 cursor position 的一些修改：

 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>

Answer 2

您可以使用在输入元素 HTML 中设置为 boolean 值true或false的data-attribute来跟踪输入焦点的当前 state。

首先将第一个data-current属性定义为true ，每隔一个属性定义为false 。 这样，默认设置为true 。 然后我们运行一个事件来检查对textarea元素的关注。 如果textarea被关注，我们删除选择器data-current值的所有实例并将它们全部设置为false ，然后我们将当前事件目标data-current值设置为true 。

然后在按钮的单击事件中，我们检查迭代它们的textarea元素并运行检查它们的data-current值的条件，我们找到设置为true的那个，然后将其值分配给按钮值。

 $('textarea').focus(e => { let $this = e.target; $('textarea').each((i, el) => { if(el.dataset.current === 'true'){ el.dataset.current = false; } $this.dataset.current = true; }) console.log(`Selected TextArea's id: ${$this.id}`) }) $('input[type=button]').click(function(){ const $this = $(this); const $ta = $('textarea'); $ta.each((i, el) => { // do not retain previously set values when a new button // is selected on a different focused textarea el.dataset.current === 'true'? el.value = $this.val(): el.value = ''; /* // retain previously set values in TA's on button click // when new textarea is focused el.dataset.current === 'true'? el.value = $this.val(): null; */ }) })

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

Answer 3

这实际上是一个简单而有趣的练习来解决，有很多方法可以解决这个特定问题，尽管我会建议我的。

这是解决的jsFiddle示例的链接。

解释：

第 1 步：在所有textarea上添加focus事件侦听器。

第 2 步：在textarea集中，从现有last-focused.textarea元素中删除 class last-focused元素。

第 3 步：将last-focused class 添加到当前聚焦的textarea元素。

第 4 步：在button上添加click监听器

第 5 步：在单击button时，select last-focused.textarea focused.textarea 元素，并将其内容替换为按钮的值。

注意：我们可以为 class 使用任何名称，只需将名称命名为last-focused ，因为它与当前上下文相关。

HTML：

<form>
  <textarea id="text1" cols="40" rows="3"></textarea>
  <textarea id="text2" cols="40" rows="3"></textarea>
  <br>
  <input type="button" value="one" />
  <input type="button" value="two" />
  <input type="button" value="three" />
</form>

JS + JQuery：

// Step 1
$('textarea').on('focus', function() {
    // Step 2
    $('textarea.last-focused').removeClass('last-focused');
    // Step 3
    $(this).addClass('last-focused');
});

// Step 4
$('input[type=button]').on('click', function() { 
    // Step 5
    $('textarea.last-focused').html($(this).val());
});

Answer 4

您可以使用 textarea 元素的焦点事件和 append 单击按钮时最后一个活动元素的值来跟踪最后一个焦点输入元素：

var mostrecent=$('textarea')[0];
$('textarea').each(function(i,item){
  $(item).focus(function(){
    mostrecent=this;
  });
});

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

 <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> <br> <input type="button" value="one" /> <input type="button" value="two" /> <input type="button" value="three" /> </form>

Answer 5

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

您很可能需要onfocus ，但可能会根据您的特定用例进行onchange 。

Answer 6

当前选择的字段是 document.activeElement。