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>

您可以通过value或element.value访问文本框的$(selector).val()。
要进行更改，请使用：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文本字段上不起作用。

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

以上方法并不完全正确。例如，如果在页面上的某个其他交互式按钮之后立即按下了虚拟键盘上的某个键，则该按钮将再次获得焦点（（不过，这可能不会导致该按钮上的操作再次发生））< / em>。希望它可以为您提供一个起点。

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

2 个答案: