js chromeでフォーカスが当たらなくなる

$(function() {
$("#01").change( function() {
var add_val = "（税抜）";
var fix = $("#memo").val() + "\n" + add_val;

	if( $("#01").val() === "1" ) {
		$("#memo").val( fix );
		alert('設定した');
	} else {
		alert('してください。');
	}
	return undefined;
});

});

テキストエリア

<textarea id="memo" name="memo" >スマーティで値表示</textarea>

このjsが動くとクロームでフォーカスが当たらなくなってしまい、テキストボックスをダブルクリックしてもキャレットがでなくなり編集ができなくなりました

firefox IEではこのような事は起きませんでした。
別タブに行きもどってくると正常にフォーカスがあてられるようになります
クロームではNGな書き方なのでしょうか。。

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

回答3件

ベストアンサー

どうやら、Google Chrome 44 では alert() を使用すると、textarea にマウスクリックでフォーカスしなくなるようですね。
[Tab] キーでフォーカス移動すれば、textarea に入力可能な事を Google Chrome 44 で確認しました。
http://jsfiddle.net/0pyrc9s5/1/
対処療法ですが、alert() を使わなければ回避可能なようです。
http://jsfiddle.net/0pyrc9s5/2/

ちなみに jQuery を使わなくても再現可能なので Google Chrome 44 固有の不具合と考えられます。
http://jsfiddle.net/0pyrc9s5/3/

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8" />
5  <title>Sample</title>
6</head>
7<body>
8
9<textarea id="memo" name="memo">スマーティで値表示</textarea> 
10<select name="sample" id="sample">
11  <option value="0">0:なし</option>
12  <option value="1">1:なし</option>
13</select>
14
15<script>
16document.getElementById('sample').addEventListener('change', function (event) {
17  var select = event.currentTarget,
18      textarea = select.ownerDocument.getElementById('memo');
19
20  if(select.value === '1') {
21    textarea.value = textarea.value + '\n(税抜)';
22    alert('設定した');  // alert() を入れると Google Chrome 44 で textarea にマウスクリックでフォーカスがあたらなくなる。ただし、[Tab] キーで textarea にフォーカスを移す事は可能で入力も可能になる)
23  } else {
24    alert('してください。');
25  }
26}, false);
27</script>
28</body>
29</html>

JavaScript
1jQuery('#sample').change(function (event) {
2  return undefined; // このコードは何も実行しない
3});

jQuery のイベントハンドラ関数では return でデフォルトアクション制御する事が可能ですが、undefined を返すのは無意味なので削除することを推奨します。
ちなみに、DOM では event.preventDefault() がデフォルトアクション抑止として古く(DOM L2 Events の頃)からある正規のメソッドで return false は HTML 5 で IE の独自拡張を取り込んだ亜種にあたります。

投稿2015/08/04 07:24

編集2015/08/05 02:25

think49

総合スコア18162

HTMLの仕様上、idを数字で始めることはできません。

たまtま動く場合もあるかもしれませんが、環境によって動かなくなることもあります。

投稿2015/08/04 05:48

maisumakun

総合スコア145183

githubac

2015/08/04 06:00

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <textarea id="memo" name="memo" >スマーティで値表示</textarea> <select name="a01" id="a01"> <option value="0" >0:なし</option> <option value="1" >1:なし</option> </select> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $("#a01").change( function() { var add_val = "（税抜）"; var fix = $("#memo").val() + "\n" + add_val; if( $("#a01").val() === "1" ) { $("#memo").val( fix ); alert('設定した'); } else { alert('してください。'); } return undefined; }); }); </script> </body> </html> すみませんでした　直しましたが、不具合でますね

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

こんにちわ。
ご提示頂いているロジックでhtmlを作ってみて、
chromeで動かしてみましたが、
特に気になる動きはしませんでした。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5</head>
6<body>
7	<input type="text" id="01" value="">
8	<textarea id="memo" name="memo" >スマーティで値表示</textarea> 
9	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
10	<script>
11		$(function() { 
12			$("#01").change( function() { 
13				var add_val = "（税抜）"; 
14				var fix = $("#memo").val() + "\n" + add_val; 
15				if( $("#01").val() === "1" ) { 
16					$("#memo").val( fix ); 
17					alert('設定した'); 
18				} else { 
19					alert('してください。'); 
20				} 
21				return undefined; 
22			}); 
23		}); 
24	</script>
25</body>
26</html>

投稿2015/08/04 04:28

退会済みユーザー

総合スコア0

githubac

2015/08/04 05:17

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <textarea id="memo" name="memo" >スマーティで値表示</textarea> <select name="01" id="01"> <option value="0" >0:なし</option> <option value="1" >1:なし</option> </select> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $("#01").change( function() { var add_val = "（税抜）"; var fix = $("#memo").val() + "\n" + add_val; if( $("#01").val() === "1" ) { $("#memo").val( fix ); alert('設定した'); } else { alert('してください。'); } return undefined; }); }); </script> </body> </html> 実際はプルダウンだったのでこのようにしたら不具合再現しました！ inputタグが原因・・？

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

あなたの回答