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

Question

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

我读过很多帖子，解释了当一个人希望添加到特定文本框时如何完成，但没有关于简单地将文本添加到任何活动文本字段的内容...

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

jquery

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

Answer 2

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

纯 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 按钮被赋予 class 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 文本字段。

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

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

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

Click - Add text - Active textbox

javascript

string

text

add

onclick