html
1<html>
2  <body>
3    <h1>TEST</h1>
4    <form>
5        <input name="name" type="text" size="100" style="width: 100px">
6        <button type="button" onclick="javascript:console.log(getElementsByName('name')[0].value);">test</button>
7    </form>
8  </body>
9</html>
10

buttonをクリックしたときはonClickが起動しconsole.logにnameの値が表示されます
同じ処理をinput内でエンターを押したときも行いたいのですがどのようにしたらよいのでしょうか
宜しくお願いします

行動規範の内容に同意します

回答4件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<form action="" method="post">
9			<p>
10				<label for="sample">sample</label>
11				<input type="text" name="sample" id="sample" />
12			</p>
13			<p>
14				<button type="submit">submit</button>
15			</p>
16		</form>
17		<script type="text/javascript">
18			var forms = document.getElementsByTagName('form');
19			var form = forms[0];
20			form.addEventListener('submit', function (evt) {
21				alert('SUBMIT ボタンが押されました');
22				evt.preventDefault();
23			});
24		</script>
25	</body>
26</html>

投稿2016/10/01 15:59

退会済みユーザー

総合スコア0

submitイベントを拾うほうが早い気がします。

HTML
1<form onsubmit="javascript:console.log(getElementsByName('name')[0].value); return false;"><!-- > return false; でフォームの送信をいったん止めてます < -->
2    <input name="name" type="text" size="100" style="width: 100px">
3    <button type="submit">test</button><!-- > type="submit" に変更 < -->
4</form>
5```**動くサンプル：**[https://jsfiddle.net/whhkut81/](https://jsfiddle.net/whhkut81/)
6
7---
8
9個人的にはjQueryで組んで、速度を気にする場所などで書き直すほうが楽でいいな、とか思います。（私はDOMの扱いが面倒になってjQueryに逃げた過去があります）

投稿2016/10/01 15:42

編集2016/10/01 15:44

kei344

総合スコア69407

解決策

html
1<html>
2  <head>
3     <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
4  </head>
5  <body>
6    <h1>TEST</h1>
7    <form>
8        <input name="inputName1" type="text" size="100" style="width: 100px">
9        <button name="buttonName1" type="button">test</button>
10    </form>
11  </body>
12</html>

javascript
1
2素の方
3window.onload = function(){
4   var input = document.getElementByName('name');
5   var button = document.querySelectorAll('button [type="button"]');
6   input.onKeyPress = function(){
7       if(window.event.keyCode === "undefined" || window.event.keyCode === 13){
8             window.event.preventDefault();
9             triggerEvent(button, 'click');
10         }
11       window.event.preventDefault();
12   }
13   button.onclick = function(){
14       console.log(getElementsByName('name')[0].value);
15   }
16}
17function triggerEvent(element, event) {
18  if (document.createEvent) {
19      var evt = document.createEvent("HTMLEvents");
20      evt.initEvent(event, true, true );
21      return element.dispatchEvent(evt);
22  } else {
23      var evt = document.createEventObject();
24      return element.fireEvent("on"+event, evt)
25  }
26}
27
28// jQery　使用版
29/*
30$(function(){
31    var input = $('form [name=inputName1]');
32    var button = $('button [name=buttonName1]');
33    input.on('keypress', function(e){
34         if(e.keyCode === "undefined" || e.keyCode === 13){
35             e.preventDefault();
36             button.trigger('click');
37         }
38         return false;
39    });
40    button.on('click', function(){
41        console.log(input.val());
42    });
43    
44})
45*/
46

解説

のちほど書きます

投稿2016/10/01 12:48

編集2016/10/01 13:10

tama_yn0815

総合スコア143

tama_yn0815

2016/10/01 13:24

ごめん、イベントハンドラファンクション作る体力なかった... 誰かお願いしゃす！

行動規範の内容に同意します

textでエンターしたらサブミットされるので
onclickするならreturn falseしたうえで
ボタンをおす処理をいれればいいでしょう

追記

一応追記しておきます

javascript
1document.addEventListener ('keydown',function(e){
2  var t = e.target;
3  if(t.nodeName=="INPUT" && t.name=="name" && e.keyCode==13){
4    t.form.getElementsByTagName("button")[0].click();
5    e.preventDefault();
6  }
7});

HTML
1<form>
2<input name="name" type="text" size="100" style="width: 100px">
3<button type="button" onclick="javascript:console.log(getElementsByName('name')[0].value);">test</button>
4</form>

投稿2016/10/01 10:59

編集2016/10/03 04:14