詳しい人求む！

javascriptでフォーカスを当てると変な文字が勝手に入るのを防ぎたい

解決済

質問者：usui-2015
質問日時：2017/12/08 10:36
回答数：2件

下記の構成に成っている。
main.html
menu.html
contents.html
150908-1504.html
150908-1515.html
150908-1518.html

main.htmlは、frameを2つ使う。
左にmenu.html
右に、
contents.html
150908-1504.html
150908-1515.html
150908-1518.html
を使う。

この中で、最初のcontents.htmlは実際には使っていません。
この中で、以下の
150908-1504.html
150908-1515.html
150908-1518.html
は単に、サンプルとして適当にデータを入れている。

main.htmlの内容
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>メニュー</title>
<body>
<iframe src="menu.html" name="menu" width="12%" height="100%"align="left" style="margin-left:50px;"></iframe>
<iframe src="contents.html" name="contents" width="80%" height="100%"align="left"></iframe>
</body>
</html>

menu.htmlの内容
<html>
<head>
<title>メニュー</title>
</head>
<body>
<style>
li.hide{display:none;}
</style>
<input type="text" name="keyword" id="keyword">
<input type="button" value="choice" onclick="choice()">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
$("#target li:last-child a")[0].focus();
$("#target li:last-child a")[0].click();

$("#target a").on('keydown',function(e){
var target_a=$(this);
if(e.keyCode==74){
var target_li=$(this).closest('li').prev('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:eq(-1)'):target_a=target_li.find('a');
}else if(e.keyCode==76){
var target_li=$(this).closest('li').next('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:eq(0)'):target_a=target_li.find('a');
}else if(e.keyCode==75){
$("#keyword").focus();
rerurn;
}
var aa=target_a.text();
var bb="#"+aa;
$(bb).focus();
$(bb)[0].click();
});
});

function choice(){
var reg=new RegExp(document.getElementById("keyword").value);
var obj=document.getElementById("target").getElementsByTagName("li");
for(var i=0;i<obj.length;i++){
obj[i].className=(obj[i].textContent.match(reg))?"":"hide";
}
}

</script>
<ol id="target">
<li><a href="./150908-1504.html" target="contents" id="150908-1504">150908-1504</a></li>
<li><a href="./150908-1515.html" target="contents" id="150908-1515">150908-1515</a></li>
<li><a href="./150908-1518.html" target="contents" id="150908-1518">150908-1518</a></li>
</ol>
</BODY>
</HTML>

contents.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
最初はここに表示する
</P>
</BODY>
</HTML>

150908-1504.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1504
</P>
</BODY>
</HTML>

150908-1515.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1515
</P>
</BODY>
</HTML>

150908-1518.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1518
</P>
</BODY>
</HTML>

この中で、
else if(e.keyCode==75){
$("#keyword").focus();
rerurn;
上記で、テキストボックスにフォーカスを当てていますが、
きちんとフォーカスを当てる事は出来ますが、
kと言う文字が勝手に入って困ります。

これを防ぐにはどうすれば良いのでしょうか。

上記のmenu.htmlのどこかで悪さをしていると思いますが。
どこで悪さをしているのかが分かりません。

済みません。悪い所を指摘願います。
宜しくお願いします。

済みません。choiceボタンをクリックしたら、
再度イベントを有効にしたいのですが。

どの様にすれば、有効に成るのでしょうか。
教えて下さい。

宜しくお願いします。

No.1の回答に寄せられた補足コメントです。補足日時：2017/12/08 13:42
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2017/12/08 11:07

それはイベントを殺してないのでkeydownが有効でkeyCode=75のkが

入力されるのでしょう。
return するのもどうかと思いますが、もしその方針なら
returnの直前にe.preventDefault();を記載してイベントを無効化して下さい

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

上手く動きました。
ここで、若しもe.preventDefault();
を使わないでやると言う事が出来るので
有れば、そちらの方法でやりたいと思う
のですが。どうなんでしょうか。

何か折角のイベントを作っているので
これを失うのは勿体無い様な気がしましたので。

また、ここではrerurnを使っていますが。
returnを使わないで処理をする方法が有るの
でしょうか。

済みません。宜しくお願いします。

通報する

お礼日時：2017/12/08 11:22

No.2

回答者： fujillin
回答日時：2017/12/08 14:45

こんにちは

既に#1様がご説明の通りですが・・・

少し詳しく考えてみると
　keydownイベント → スクリプトの処理 → ブラウザのキー処理
の順に処理されるので、inputにフォーカスが移動してからキー入力への対応がブラウザでなされるため、文字入力がされているものと思われます。
これを防止する方法もすでに#1の回答にある通りですが、イベントのフックをkeyupに変えることでも、上記の処理順序が変わるので、イベントの伝搬を停止しなくてもinputにキー入力されることはなくなります。

＞済みません。choiceボタンをクリックしたら、
＞再度イベントを有効にしたいのですが。
意味が不明ですが・・・
一度設定したイベントは、意図的に外さない限り継続されます。

　・151を入力 → choice押下げ → 1515、1518の2つが表示
　・続いて1518を入力 → choice押下げ → 1518の1つが残る
といった手順でも、有効になっていることは確認できるものと思います。

想像するところ、現状が絞込み検索のようになっているのは意図してのことではでなくて、実は、常に全体から検索を行いたいというのであるなら、（その前の処理で）設定されているhideクラスを一旦全てキャンセルしてあげる必要があると思われます。