我希望单击按钮后，我的按钮的值会出现在文本框中

时间：2016-12-13 15:12:50

标签： javascript jquery html keyboard dhtml

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

<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>

5 个答案:

答案 0 :(得分：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);
 });

答案 1 :(得分：0)

//请尝试这个工作示例

$('#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>

答案 2 :(得分：0)

我在工作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>的输出字段类型上略有变化 

{{1}}
{{1}}

答案 3 :(得分：0)

这可能会有所帮助

//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 :(得分：0)

只使用javaScript而不需要jQuery。

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

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

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

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

注意<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>

相关问题
最新问题