プロが教えるわが家の防犯対策術！

詳しい人求む！

javascriptで、jとlの打鍵でリンク行を上下に移動させたい、出来るのだろうか。

解決済

  • 質問者：usui-2015
  • 質問日時：
  • 回答数：4件

下記のhtmlでは開いた時に最後のリンク行にフォーカスが有る。

これを、jキーでリンク行を上にフォーカスして、
lキーでリンク行を下にフォーカスさせたい。

これは、Jqueryで出来るのだろうか。

下記に今現在のhtmlを示します。
<html>
<head>
<title>メニュー</title>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style>
li.hide{display:none;}
</style>
<input type="text" name="keyword" id="keyword">
<input type="button" value="choice" onclick="choice()">
<ol id="target">
<li><a href="./150908-1504.html" target="contents">150908-1504</a></li>
<li><a href="./150908-1515.html" target="contents">150908-1515</a></li>
<li><a href="./150908-1518.html" target="contents">150908-1518</a></li>
<li><a href="./150908-1811.html" target="contents">150908-1811</a></li>
<li><a href="./150908-2004.html" target="contents">150908-2004</a></li>
<li><a href="./150909-0105.html" target="contents">150909-0105</a></li>
<li><a href="./150909-0652.html" target="contents">150909-0652</a></li>
<li><a href="./150909-0925.html" target="contents">150909-0925</a></li>
<li><a href="./150909-1011.html" target="contents">150909-1011</a></li>
<li><a href="./150909-1121.html" target="contents">150909-1121</a></li>
<li><a href="./150909-1232.html" target="contents">150909-1232</a></li>
<li><a href="./150909-1423.html" target="contents">150909-1423</a></li>
<li><a href="./150910-0046.html" target="contents">150910-0046</a></li>
</ol>
<script type="text/javascript">
$(function(){
$("#target li:last-child a")[0].focus();
});
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>
</BODY>
</HTML>

質問者からの補足コメント

  • うーん・・・

    $("#target li:last-child a")[0].focus();
    上記を、下記の様に変更すると、
    $("#target li:last-child a")[0].prev().focus();

    TypeError: $(...)[0].prev is not a function
    上記のエラーが出る。

      補足日時：2017/12/05 03:28
    通報する

  • うれしい

    有難う御座います。

    最後にリンクをする場合にどうするかは
    質問を再度提出します。

    有難う御座います。

    No.4の回答に寄せられた補足コメントです。 補足日時：2017/12/05 20:49
    通報する
通報する

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

質問の本文を隠す

A 回答 (4件)

No.1

  • 回答者： yambejp
  • 回答日時：

こんな感じ



<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("#target a").on('focus',function(){
$("#target a").css({"background-Color":""});
$(this).css({"background-Color":"red"});
}).last(0).trigger("focus");
$("#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:last-child'):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');
}
target_a.trigger('focus');
});
});
</script>

<ol id="target">
<li><a href="./150908-1504.html" target="contents">150908-1504</a></li>
<li><a href="./150908-1515.html" target="contents">150908-1515</a></li>
<li><a href="./150908-1518.html" target="contents">150908-1518</a></li>
<li><a href="./150908-1811.html" target="contents">150908-1811</a></li>
<li><a href="./150908-2004.html" target="contents">150908-2004</a></li>
<li><a href="./150909-0105.html" target="contents">150909-0105</a></li>
<li><a href="./150909-0652.html" target="contents">150909-0652</a></li>
<li><a href="./150909-0925.html" target="contents">150909-0925</a></li>
<li><a href="./150909-1011.html" target="contents">150909-1011</a></li>
<li><a href="./150909-1121.html" target="contents">150909-1121</a></li>
<li><a href="./150909-1232.html" target="contents">150909-1232</a></li>
<li><a href="./150909-1423.html" target="contents">150909-1423</a></li>
<li><a href="./150910-0046.html" target="contents">150910-0046</a></li>
</ol>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。動きしました。助かりました。

動いたんですが、少し分からない所が有りましたので
教えて下さい

$("#target a").on('focus',function(){
$("#target a").css({"background-Color":""});
$(this).css({"background-Color":"red"});
}).last(0).trigger("focus");

上記の部分で、下記が少し分かリ難いのですが。
$("#target a").on('focus',function(){
$("#target a").css({"background-Color":""});
$(this).css({"background-Color":"red"});
})

最初に上記の部分は、#target aにフォーカスした時の匿名関数
の定義で、2つの場合のcssでbackground-Colorを定義しています。

この表記で$("#target a").cssは、フォーカスされていない場合の
カラーを指定して、
$(this).cssはフォーカスされている場合のカラーを指定する。

ここでの表記で$("#target a")と$(this)の表記の違いが良く分かりません。

ここで、thisと言うのは何を示しているんでしょうか。
$("#target a").cssは何とはなしに、何もフォーカスされていない時の
カラーを指定している感じですが。

$(this)と言うのは、構文上ではフォーカスと言う記述が見当りませんので
この文脈はどの様に理解をすれば良いのか、分かりません。

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

通報する
お礼日時：2017/12/05 13:21

No.2

  • 回答者： Ogre7077
  • 回答日時：

> jキーで


> lキーで
ブラウザへのキー入力を制御
https://developer.mozilla.org/ja/docs/Web/API/Ke …

> リンク行を上にフォーカス
> リンク行を下にフォーカス
DOM を辿る jQuery の関数
http://api.jquery.com/category/traversing/tree-t …

余談ではありますが、
hjkl などのキー入力を別の用途に使う人が居るのでご留意ください。
https://vimium.github.io/
https://github.com/ueokande/vim-vixen/blob/maste …
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

> $("#target a").on('focus',function(){



これは#targe aのどれか一つに対してfocusしたときの動作をしていします

> $("#target a").css({"background-Color":""});

#target aに条件があう全ての要素に対して背景色をクリアにしています

> $(this).css({"background-Color":"red"});

フォーカスしたタグ（つまりはthis）にたいして背景色を設定しています

つまり、全部をクリアして自分を設定するので、フォーカスが移動する前のタグ情報がクリアできます
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。

大変に分かリ易い説明で有難う御座います。
$("#target a").on('focus',function(){
$("#target a").css({"background-Color":""});
$(this).css({"background-Color":"red"});
})

上記の後に続く、.last(0).trigger("focus");
は、last(0)は、一番最後にフォーカスしたと言う事の
プロパティになるんでしょうか。

trigger("focus")と言うのは、メソッドと言う事でしょうか。

そうすると、$("#target a").on('focus',function(){..})
と言う匿名関数はオブジェクトを返すと言う事でしょうか。

済みません。また疑問が出て来ました。
.last(0).trigger("focus");の所の文脈の理解が出来ません。

ここが一番大事な所ですが、今いち、全体の文脈を理解し辛いです。

宜しくお願いします。

通報する
お礼日時：2017/12/05 15:20

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

> .last(0).trigger("focus");の所の文脈の理解が出来ません。



これはjQueryではよく使われる手法ですが、初期状態でメソッドを実行させる方法です。
つまり

$("#target a").on('focus',function(){
・・・
})

までのククリで#target aにfocusイベントを設定しておいた状態で、

}).last(0).trigger("focus");
イベントを発生させています、つまり
$("#target a").last(0).trigger("focus");
を実行しているわけです。
これはすなわち#targetないの最後のaにfocusさせています。

書き方としては
$("#target a").last(0).focus();
のようなイメージですが、文字列として「focus」を渡すことで実行できるのは
プログラムとして汎用性が高くなるので往々にしてtriggerが使われることが多くなります
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。

分かりやすい説明有難う御座います。
$("#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:last-child'):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');
}
target_a.trigger('focus');
});
ここで、if(e.keyCode==74){...の処理では、prevの処理を
target_a=target_li.length==0?$(this).closest('ol').find('a:last-child'):target_a=target_li.find('a');

上記は、target_li.length==0と言う事は、liの要素が一つしか無かった。
そうで無い時は、target_a=target_li.find('a');に依り値をセットする。

最後に、target_a.trigger('focus');でフォーカスを移動すると言う事でしょうか。
と認識しましたが、合っているでしょうか。

宜しくお願いします。

通報する
お礼日時：2017/12/05 16:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報