我希望我的按钮的值在单击按钮时出现在文本框中答案

【问题标题】：I want the value of my button to appear in a textbox upon clicking the button我希望我的按钮的值在单击按钮时出现在文本框中
【发布时间】：2017-04-28 17:06:04
【问题描述】：

我正在创建一个屏幕键盘，并希望有一个功能可以在按下任何按钮时允许它们的值出现在键盘侧面的文本框中。我到目前为止的代码是：-

<script type="text/javascript">
    function onclick(){
    document.getElementById("output").value
    =document.getElementById("Q").value;  
    }
</script>

以及下面的 HTML 代码：-

<div class ="Row">
    <div class="Box2">
      <form id="keyboard" name="keyboard">
        <div>
        <input type="button" onclick='onclick' id="Q" value="Q">
        <input type="button" value="W">
        <input type="button" value="E">
        <input type="button" value="R">
        <input type="button" value="T">
        <input type="button" value="Y">
        <input type="button" value="U">
        <input type="button" value="I">
        <input type="button" value="O">
        <input type="button" value="P">
        </div>
        <div>
        <input type="button" value="A">
        <input type="button" value="S">
        <input type="button" value="D">
        <input type="button" value="F">
        <input type="button" value="G">
        <input type="button" value="H">
        <input type="button" value="J">
        <input type="button" value="K">
        <input type="button" value="L">
        </div>
        <div>
        <input type="button" value="Z">
        <input type="button" value="X">
        <input type="button" value="C">
        <input type="button" value="V">
        <input type="button" value="B">
        <input type="button" value="N">
        <input type="button" value="M">
        </div>
        <div>
        <input type="button" value="SPACE">
        <input type="button" value="ENTER">
        </div> 
      </form>
      <input type='text' id='output' />
    </div>
  </div>
</div>

【问题讨论】：

为什么name="keyboard"会重复？

标签： javascript jquery html keyboard dhtml

【解决方案1】：

只使用 javaScript 而不需要 jQuery。

此示例包括使用 SPACE 和 ENTER 键。作为奖励，我添加了一个 BACKSPACE 键。

请注意，您的输出文本字段已更改为文本区域以允许使用回车键。

为表单创建一个事件监听器。这可以使用文档查询选择器来完成。

使用查询选择器捕获点击事件。

注意<body> 标记我们添加了onload 事件处理程序，因此当提供文档时，事件侦听器被分配给<form> 节点。

<form> 内的任何点击都会被测试

HTML 和 javaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="en">
	<head>
		<script type="text/javascript">
			var g = {};
			function assignListener()
			{
				 /*event listener for keyboard*/
				  g.keyboard = document.querySelector("#keyboard");
				  g.keyboard.addEventListener("click", addToTextBox,false);
			}
			
			function addToTextBox(e)
			{
                /*
                  with query selector the event (e) is passed along
                  to the function.  You can examine the event and get
                  all kinds of useful stuff from it, like type of event, where it came from, attributes like id, class list etc.
                */
				if (e.target.type == 'button')
				{
					switch (e.target.value)
					{
						case "ENTER":
							document.getElementById('output').value += '\n';
							break;
						case "SPACE":
							document.getElementById('output').value += ' ';
							break;
						case "BACKSPACE":
							document.getElementById('output').value = document.getElementById('output').value.substr(0,document.getElementById('output').value.length-1);
							break;
						default:
							document.getElementById('output').value += e.target.value;
					}
				}

			}
		</script>   
	</head>
	
	<body onload="assignListener();">
		<div class ="Row">
			<div class="Box2">
				<form id=keyboard>
                    <div>
		                <input type="button" value="Q">
		                <input type="button" value="W">
		                <input type="button" value="E">
		                <input type="button" value="R">
		                <input type="button" value="T">
		                <input type="button" value="Y">
		                <input type="button" value="U">
		                <input type="button" value="I">
		                <input type="button" value="O">
		                <input type="button" value="P">
	                </div>
	                <div>
		                <input type="button" value="A">
		                <input type="button" value="S">
		                <input type="button" value="D">
		                <input type="button" value="F">
		                <input type="button" value="G">
		                <input type="button" value="H">
		                <input type="button" value="J">
		                <input type="button" value="K">
		                <input type="button" value="L">
	                </div>
	                <div>
		                <input type="button" value="Z">
		                <input type="button" value="X">
		                <input type="button" value="C">
		                <input type="button" value="V">
		                <input type="button" value="B">
		                <input type="button" value="N">
		                <input type="button" value="M">
	                </div>   
 						    <div>
						<input type="button" value="SPACE">
						<input type="button" value="ENTER">
						<input type="button" value="BACKSPACE">
					</div> 
				</form>
			  <!-- <input type='text' id='output' /> -->
				  <textarea id="output" rows="5" cols="75"></textarea>
			</div>
		</div> 
	</body>
</html>

【讨论】：

【解决方案2】：

您已将其标记为 jQuery，因此这里有一个更优雅的 jQuery 解决方案：丢弃该代码并使用单个委托的 jQuery 事件处理程序。从这样的开始：

$('[name=keyboard]').on('click', 'input[type=button]', function(){
   var value = $(this).attr('value');
   $('#output').val($('#output').val() + value);
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/kaau601u/

显然，您需要将 SPACE 和 ENTER 作为特殊情况处理，但您没有给出下一步要做什么的线索，所以让读者来完成 :)

注意事项：

您要么需要将此代码放在它引用的元素之后，要么将其放入 DOM 就绪处理程序中。

像这样：

$(function(){
    $('[name=keyboard]').on('click', 'input[type=button]', function(){
       var value = $(this).attr('value');
       $('#output').val($('#output').val() + value);
    });
});

或者您可以使用document 附加的处理程序，它始终存在：

像这样：

 $(document).on('click', 'input[type=button]', function(){
    var value = $(this).attr('value');
    $('#output').val($('#output').val() + value);
 });

【讨论】：

【解决方案3】：

这可能会有所帮助

//this this the script that makes it happen...
	$('form[name=keyboard]>div>input[type=button]').click(function(){
		$('#output').val($(this).val());
		console.log($(this).val());
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
	<div class="Box2">
		<form name="keyboard">
			<div>
				<input type="button" value="Q">
				<input type="button" value="W">
				<input type="button" value="E">
				<input type="button" value="R">
				<input type="button" value="T">
				<input type="button" value="Y">
				<input type="button" value="U">
				<input type="button" value="I">
				<input type="button" value="O">
				<input type="button" value="P">
			</div>
			<div>
				<input type="button" value="A">
				<input type="button" value="S">
				<input type="button" value="D">
				<input type="button" value="F">
				<input type="button" value="G">
				<input type="button" value="H">
				<input type="button" value="J">
				<input type="button" value="K">
				<input type="button" value="L">
			</div>
			<div>
				<input type="button" value="Z">
				<input type="button" value="X">
				<input type="button" value="C">
				<input type="button" value="V">
				<input type="button" value="B">
				<input type="button" value="N">
				<input type="button" value="M">
			</div>
			<div>
				<input type="button" value="SPACE">
				<input type="button" value="ENTER">
			</div>
		</form>

		<input title="keyboard" type='text' id='output' />
	</div>
</div>

【讨论】：

【解决方案4】：

我在SPACE 和ENTER 工作时对输出字段类型进行了轻微更改

jQuery('form[name="keyboard"]  input[type="button"]').click(function(){
  
  var inpVal = jQuery(this).val();
  
  if( inpVal == "SPACE" ){
    inpVal = ' '; 
  }else if( inpVal == "ENTER" ){
    inpVal = '\n'; 
  }

  var val = jQuery('#output').val() + inpVal;
  
  
  jQuery('#output').val(val);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class ="Row">
    <div class="Box2">
      <form name=keyboard name="keyboard">
        <div>
        <input type="button" onclick='onclick' id="Q" value="Q">
        <input type="button" value="W">
        <input type="button" value="E">
        <input type="button" value="R">
        <input type="button" value="T">
        <input type="button" value="Y">
        <input type="button" value="U">
        <input type="button" value="I">
        <input type="button" value="O">
        <input type="button" value="P">
        </div>
        <div>
        <input type="button" value="A">
        <input type="button" value="S">
        <input type="button" value="D">
        <input type="button" value="F">
        <input type="button" value="G">
        <input type="button" value="H">
        <input type="button" value="J">
        <input type="button" value="K">
        <input type="button" value="L">
        </div>
        <div>
        <input type="button" value="Z">
        <input type="button" value="X">
        <input type="button" value="C">
        <input type="button" value="V">
        <input type="button" value="B">
        <input type="button" value="N">
        <input type="button" value="M">
        </div>
        <div>
        <input type="button" value="SPACE" >
        <input type="button" value="ENTER">
        </div> 
      </form>
      <textarea id="output"  cols="40" rows="5"></textarea>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

//请试试这个工作示例

$('#Q').click(function(){
		$('#output').val($(this).val());
		console.log($(this).val());
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
	<div class="Box2">
		<form name=keyboard name="keyboard">
			<div>
				<input type="button" id="Q" value="Q">
				<input type="button" value="W">
				<input type="button" value="E">
				<input type="button" value="R">
				<input type="button" value="T">
				<input type="button" value="Y">
				<input type="button" value="U">
				<input type="button" value="I">
				<input type="button" value="O">
				<input type="button" value="P">
			</div>
			<div>
				<input type="button" value="A">
				<input type="button" value="S">
				<input type="button" value="D">
				<input type="button" value="F">
				<input type="button" value="G">
				<input type="button" value="H">
				<input type="button" value="J">
				<input type="button" value="K">
				<input type="button" value="L">
			</div>
			<div>
				<input type="button" value="Z">
				<input type="button" value="X">
				<input type="button" value="C">
				<input type="button" value="V">
				<input type="button" value="B">
				<input type="button" value="N">
				<input type="button" value="M">
			</div>
			<div>
				<input type="button" value="SPACE">
				<input type="button" value="ENTER">
			</div>
		</form>

		<input type='text' id='output' />
	</div>
</div>

【讨论】：

“工作”示例可能有点乐观...您是否尝试过自己运行它？您只将它连接到 Q 键，没有其他任何东西。
我已经根据他的例子运行了5次，考虑到第一个按钮输入中只有id，请看他提供的示例代码。