单击 - 添加文本 - 活动文本框答案

【问题标题】：Click - Add text - Active textbox单击 - 添加文本 - 活动文本框
【发布时间】：2018-07-16 15:51:28
【问题描述】：

我想在单击按钮时向活动文本框添加文本。

我已经阅读了许多线程，解释了当一个人希望添加到特定文本框时如何完成，但只是将文本添加到任何处于活动状态的文本字段都没有......

任何帮助将不胜感激。谢谢。

【问题讨论】：

全世界没有一个textbox，你说的是什么技术/平台？
抱歉。我正在寻找一个 javascript 函数来模拟在键盘上键入字符串和字母。

标签： javascript string text onclick add

【解决方案1】：

以下是虚拟键盘的解决方案。

纯 JS + HTML：

function bind()  {
  var keyArr = document.getElementsByClassName('key');
  for(var i = 0; i < keyArr.length; i++)  {
    keyArr[i].addEventListener('click', function()  {
      document.getElementById('textinput').value += this.innerHTML;
    });
  }
  var capsLock = document.getElementById('capslock');
  capsLock.addEventListener('click', function()  {
    for(var i = 0; i < keyArr.length; i++)  {
      if(capsLock.capsactive)  {
        keyArr[i].innerHTML = keyArr[i].innerHTML.toLowerCase();
      }  else  {
        keyArr[i].innerHTML = keyArr[i].innerHTML.toUpperCase();
      }
    }
    capsLock.capsactive = !capsLock.capsactive;
  });
}

<body onload='bind()'>
  <input id='textinput'><br>
  <button class='key'>q</button>
  <button class='key'>w</button>
  <button class='key'>e</button>
  <button class='key'>r</button>
  <button class='key'>t</button>
  <button class='key'>y</button><br>
  <button id='capslock' capsactive=false>CapsLock</button>
</body>

您可以通过element.value 或$(selector).val() 访问文本框的value。
如需更改，请使用：element.value = newvalue; (JS) 或 $(selector).val(newvalue); (jQuery)。

在示例中，...addEventListener... 为每个按钮附加了一个功能。此处的函数将 textinput 文本框的值更改为前一个值 + 按下按钮的文本。
例如，如果capsLock 按钮被赋予类key，则在单击capsLock 时，文本"Caps Lock" 将附加到文本框。

注意：此解决方案涵盖将文本添加到特定字段。如果页面上存在多个文本框，并且必须将文本添加到当前焦点所在的文本框，则必须采用不同的方法：

var lfl = -1, capsactive = false;
$(document).ready(function()  {
  $('*').blur(function()  {
    lfl = this;
  });
  $('.key').click(function()  {
    if($(lfl).hasClass('vkballowed'))  {
      $(lfl).val($(lfl).val() + $(this).html());
      $(lfl).focus();
    }
  });
  $('#capslock').click(function()  {
    capsactive = !capsactive;
    if(capsactive == true)  {
      $('.key').each(function()  {
        $(this).html($(this).html().toUpperCase());
      });
    }  else  {
      $('.key').each(function()  {
        $(this).html($(this).html().toLowerCase());
      });
    }
    $(lfl).focus();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id='input0' class='vkballowed'><p>Editable</p><br>
<input id='input1' class='vkballowed'><p>Editable</p><br>
<input id='input2'><p>Not Editable</p><br>
<button class='key'>q</button>
<button class='key'>w</button>
<button class='key'>e</button>
<button class='key'>r</button>
<button class='key'>t</button>
<button class='key'>y</button><br>
<button id='capslock'>CapsLock</button>

示例说明：关注Editable 文本字段，然后按虚拟键盘上的一个键，以便将相应的文本附加到字段中。虚拟键盘在 Not Editable 文本字段上不起作用。

这里，页面上最后一个失去焦点的元素（是blurred）存储在一个变量中。接下来，每当按下虚拟键盘上的某个键时，首先检查该控件上是否允许使用该键盘，然后将按钮的文本附加到该控件，最后将焦点返回给该控件。请注意，如果将类vkballowed 添加到诸如buttons 之类的控件中，则不会对这些控件执行任何操作。在具有value 属性的其他控件（例如textareas）上，虚拟键盘将起作用。

上述方法并不完全正确。例如，如果在页面上的某个其他交互按钮之后立即按下虚拟键盘上的某个键，则该按钮将再次获得焦点（但这可能不会重新导致附加到该按钮的操作）。不过，希望它能给你一个起点。

【讨论】：

【解决方案2】：

jquery

$('#buttonId').click(function(event) {
 $('.tstboxClass').val('heelo i am text box value.');
})

【讨论】：