プロが教える店舗&オフィスのセキュリティ対策術

下記のコードでは、inputフォーム上でカーソルを置き、[Alt]+ [z] キーを押したときに、「Hello」という文字列が入力されるようにしました。
実装面では、[Alt]+ [z] キーを押したときに、カーソルがある部分のclassの値を取得し、その部分を.val()で取得、書き換えを行っています。ただ問題がありまして、classの値で取得しているので、valで書き換える時に、全てのclass値をもつinputのvalueの値が書き換わってしまいます。classではなくidを取得するように変更すれば解決しますが、どうしてもclassの値で取得したいのですけど、解決策はありますでしょうか?
(私が書いたJavascriptのコード自体、これが効率よいのか自信がないので、効率的な書き方がありましたらアドバイスください。)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …
<style>
</style>
<script>
$(function() {

function KeyDownFunc(e){

if(true == e.altKey && 90 == e.keyCode){

var element =document.activeElement

if(element.className){
var getData = String($("." + element.className).val());
$("." + element.className).val( getData + "Hello" ).focus();
}
}

}

if(document.addEventListener){
document.addEventListener("keyup" , KeyDownFunc);
}

});
</script>
</head>
<body >

<input type="text" name="" value="test" class="sss"><br>
<input type="text" name="" value="xxx" class="sss"><br>
<input type="text" name="" value="" class="sss"><br>


</body>
</html>

A 回答 (2件)

こんにちは



効率的かどうかはわかりませんが、ご提示の内容ならjQery無しでもたいして変わりませんね。

対象となる入力欄の特定をどう行えばよいのか不明ですが、とりあえず、
 <input type="text" class="sss">
の要素に対して有効となるようにしてあります。
また、documentレベルでイベントを取得しているので、動的に上記同等の要素が追加されたりした場合でも、そのままで動作するはずです。

<script>
document.addEventListener("keydown", function(evt){
if(evt.altKey == true && evt.keyCode == 90){
var t = evt.target, c = t.classList.contains("sss");
if(t.nodeName == "INPUT" && t.type == "text" && c) t.value += "Hello";
}
}, false);
</script>
    • good
    • 1
この回答へのお礼

ありがとうございます。jQueryのkeydownでも実装を試しましたが、確かに、javascriptだけの方がコード量がすくなくて、見やすいです。書き方がとても勉強になります。

お礼日時:2017/11/17 21:08

キーダウンイベント関数をclass名指定で、全てのテキストボックスにバインドすればいいと思います。

そうすれば、alt+zが押された時には、そのテキストボックスの関数だけが動きます。

こちらのサンプルを見てみてください

http://js.studio-kingdom.com/jquery/events/keydown
    • good
    • 1
この回答へのお礼

ありがとうございます。.keydown()のようなメソッドがあるとは知りませんでした。勉強になります。

お礼日時:2017/11/17 21:07

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