詳しい人求む！

検索した後の最初の画面で、フォーカスした行の内容を表示しない

締切済

質問者：usui-2015
質問日時：2017/12/11 05:21
回答数：2件

下記の構成と成っている。
main.html
menu.html
contents.html
1509-1504.html
150908-1515.html
150909-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" tabindex=1>
<input type="button" value="choice" onclick="choice()" tabindex=2>
<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();

$("#keyword").keypress(function(e) {
var c = e.which ? e.which : e.keyCode;
if (c == 13) {
$("#choice").focus();
choice.call();
e.preventDefault();
}
});

$("#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();
e.preventDefault();
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";
}
$("#target a").focus();
}

</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="./150909-1518.html" target="contents" id="150909-1518">150909-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>

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

ここで、kを打鍵してから検索するワードを入力
すると、結果を表示して結果の欄にカーソルは行
くが、その時の内容は表示されないで、前の内容
を表示している。

次に、カーソルを前後に移動すると、その時は内容
を表示する。常に、最初の行にカーソルが飛んだ時
は内容を表示しないで、前の内容を表示する。

これは、choice関数の中で、やっているが。この関数
の何処がおかしいのだろうか。

済みません。指摘をお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2017/12/12 15:43

こんにちは。

回答が無いみたいなので・・・

＞結果を表示して結果の欄にカーソルは行くが、
＞その時の内容は表示されない
「表示されない」というのはiframe内にそのリンクのurlが表示されないという意味でしょうか？

スクリプトからiframeに内容を表示するには、大きく2種類の方法が考えられます。
1）iframeのsrc属性に、指定するurlを設定する
2）iframeをtargetとした、リンク要素をクリックする
どちらでも可能ですが、ご提示のスクリプトでは2）の方法を用いているようですね。

＞カーソルは行くが～～～表示されない
カーソルの移動はfocus()で行っているようです。表示するには、上記のクリックかsrc属性の設定を行う必要があります。
ご提示のスクリプトを見てみると、移動（ｊ,ｌの押下げ）の際には表示処理を併せて行っていますが、他では行っていないので、結果としてご質問のようになっているだけと思われます。

余談ですが・・・
同じような処理内容を場所によって異なる記述方法で記していたり、だいぶまわりくどい記述をしていたりするように見受けられます。（何か意図があるのかもしれませんが・・・）
意図的ではない場合は、一度、見直して整理なさった方が宜しいかと。

例えば、
＞ var aa=target_a.text();
＞ var bb="#"+aa;
＞ $(bb).focus();
＞ $(bb)[0].click();
は、HTMLにタイプミスがあると結果的に何の処理もされませんが、自分自身を取得し直しているだけなので、
　 target_a.focus().click();
ですんでしまいそうに思えます。
（idがこのためにあるのなら、タグ側のidも無くてもよそうな気がしますが…）

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

実は、最初はこの回答に有る様に、
target_a.focus().click();
と書いていましたが、このメソッドチェーンは出来ません。

その時のコードを下記に示します。
target_a.focus().click();
/*
//target_a=target_li.find('a');
var aa=target_a.text();
var bb="#"+aa;
$(bb).focus();
$(bb)[0].click();
*/
コメントを外して、下記の様にすると動きます。
//target_a=target_li.find('a');
var aa=target_a.text();
var bb="#"+aa;
$(bb).focus();
$(bb)[0].click();

メソッドチェーンが出来れば楽と思い、かなり
挑戦しましたが出来ませんでしたので。苦肉の策
としてコードを書きました。

そこは動いていますので、良しとして。私が出した問題の
趣旨は、choice()の関数の所で、回答者が示した様に
focus()で止まっています。

実はここの所で、click()させる方法が分かりません。と言うのが
質問の趣旨です。

そこの所だけが、今は解決をしていません。
済みません。そこの所だけの回答を宜しくお願いします。

また、この前に書いた所のメソッドチェーンが出来ない
理由も教えて貰えれば幸いです。

宜しくお願いします。

通報する

お礼日時：2017/12/13 01:13

No.2

回答者： fujillin
回答日時：2017/12/13 09:51

#1です。

＞実はここの所で、click()させる方法が分かりません
スクリプトで行っていることの意味をきちんと理解なさった方がよろしいかと。
なお、回答もちゃんと読んだ方が良いと思いますよ。

面倒なら、別途で、
$(function(){ $("#target a").on("focus", function(){ $(this).click();} );});
とでもしておけば良いのでは？

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

私の理解が悪くて済みません。
回答通りに記述して動かない物に付いては、
私にはどうしてそれが動かないのかは分かり
ません。

最初の回答は、target_a.focus().click();
として、動くと言われましたが、これは
動きません。

また、今回の
$(function(){ $("#target a").on("focus", function(){ $(this).click();} );});
も、この通りにしても動かないのですが。

何が悪いのでしょうか。
menu.htmlの<script>から、</script>の所は下記
の様に成っています。
<script type="text/javascript">
<!--
$(function(){
...上記に下記を追加しました。

$("#target a").on("focus", function(){
$(this).click();
});
これは、動きません。何が悪いのでしょうか。
私の理解が足りなくて済みませんが。

出来れば、全体のスクリプトを提示願えないでしょうか。

宜しく回答願います。